DevExpress Universal拥有.NET开发需要的所有平台控件，包含600多个UI控件、报表平台、DevExpress Dashboard eXpressApp 框架、适用于 Visual Studio的CodeRush等一系列辅助工具。 此方法基于客户端 - 服务器模型，您需要一个服务器（一个ASP.NET Core或ASP.NET MVC后端）和一个客户端（前端）应用程序，其中包括所有必需的样式、脚本和HTML模板。请注意，客户端上的脚本版本应与服务器上的库版本匹配，直至次要版本。 本文介绍如何将DxDashboardControlModule模块导入Angular应用程序并显示Web Dashboard。 先决条件cmd npm install -g @angular/cli 要求- 客户端上的脚本版本应与服务器上的库版本匹配，直至次要版本。
- devexpress npm软件包的版本应该相同（其主要版本和次要版本应该相同）。
创建Angular应用程序在命令提示符下，创建一个Angular应用程序： cmd ng new dashboard-angular-app 创建项目后，导航到创建的文件夹： cmd cd dashboard-angular-app 安装仪表板软件包devexpress-dashboard npm软件包将devextreme和@ devexpress / analytics-core引用为peerDependencies，peerDependencies软件包应手动安装。 这使开发人员可以控制peerDependencies软件包的版本，并保证该软件包安装一次，devexpress-dashboard-angular软件包包含DashboardControl组件和模块。 安装具有必需的peerDependencies的仪表板软件包： cmd 安装完成后，您可以在node_modules文件夹中找到所有库。 导入仪表板模块在app.module.ts文件中，导入DxDashboardControlModule模块。 typescript [C#] 纯文本查看 复制代码 // ...
import { DxDashboardControlModule } from 'devexpress-dashboard-angular';
@NgModule({
imports: [
// ...
DxDashboardControlModule
],
// ...
})
export class AppModule { }
添加仪表板组件打开app.component.html文件，并添加<dx-dashboard-control>元素来呈现仪表板组件： html [HTML] 纯文本查看 复制代码 <dx-dashboard-control
style="display: block;width:100%;height:800px;"
endpoint="https://demos.devexpress.com/services/dashboard/api"
>
</dx-dashboard-control>
DashboardControlOptions.endpoint属性指定用于将数据请求发送到服务器的URL，该值应由承载Web仪表板服务器端的基本URL和路由前缀组成 - 路由前缀 - 在MVC / .NET Core MapDashboardRoute属性中设置的值。 添加全局样式在styles.css文件中添加以下全局样式： css [CSS] 纯文本查看 复制代码 @import url("../node_modules/jquery-ui/themes/base/all.css");
@import url("../node_modules/devextreme/dist/css/dx.common.css");
@import url("../node_modules/devextreme/dist/css/dx.light.css");
@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css");
@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css");
@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css");
@import url("../node_modules/devexpress-dashboard/dist/css/dx-dashboard.light.css");
运行应用程序运行应用程序。 cmd npm start
DevExpress技术交流群3：700924826 欢迎一起进群讨论
| 
发表于 2021-1-12 10:18:27