在开始本教程之前，您需要一个使用 Angular CLI 创建的 Angular 7+ 应用程序。
一键设置
您可以使用作为 DevExtreme CLI 一部分的单个 npx 命令安装和配置 DevExtreme 及其依赖项：
npx -p devextreme-cli devextreme add devextreme-angular
运行该命令后，您可以跳过以下文章，直接继续导入 DevExtreme 模块。
如果该命令因任何原因不可用或者您需要旧版本，请按照以下说明进行手动设置。
安装 DevExtreme
安装 devextreme 和 devextreme-angular npm 包：
npm install devextreme@21.1 devextreme-angular@21.1 --save --save-exact
注意：建议保存 DevExtreme 的确切版本以避免意外更新，因为 DevExtreme 不使用语义版本控制。在我们的系统版本中，第一个和中间的数字表示可能包含操作更改的主要版本。
配置Stylesheets
打开 angular.json 文件并引用预定义的主题样式表（下面代码中的 dx.light.css）。
angular.json
{"projects": {"ProjectName": {"architect": {"build": {"options": {"styles": ["node_modules/devextreme/dist/css/dx.light.css","src/styles.css"],...},...},...}},...},...}
然后跳转到src文件夹，打开index.html文件，并将dx-viewport类添加到 <body> 标签，这确保将主题颜色和排版设置应用于所有页面元素（而不仅仅是 DevExtreme UI 组件）。
index.html
<html lang="en"><head><!-- ... --></head><body class="dx-viewport"><app-root></app-root></body></html>
注意：基于SVG 的 UI 组件不需要主题样式表，如果您选择引用样式表，UI 组件将应用与其匹配的外观。
注册第三方依赖项
JSZip注册
DevExtreme 需要JSZip 库，从 JSZip v3.3.0 开始，该库不需要注册。如果您使用早期版本，请在 tsconfig.json 文件中注册 JSZip：
tsconfig.json
{..."compilerOptions": {..."paths": {"jszip": ["node_modules/jszip/dist/jszip.min.js"]}}}
全局注册
如果要使用 Globalize 进行本地化，请安装它和 devextreme-cldr-data 扩展：
npm install –save-dev devextreme-cldr-data globalize
然后，在tsconfig.json文件中注册Globalize和CLDR脚本…
tsconfig.json
{..."compilerOptions": {..."paths": {"globalize": ["node_modules/globalize/dist/globalize"],"globalize/*": ["node_modules/globalize/dist/globalize/*"],"cldr": ["node_modules/cldrjs/dist/cldr"],"cldr/*": ["node_modules/cldrjs/dist/cldr/*"]}}}
…并在 src 文件夹中创建一个 Typings.d.ts 文件，其中包含 Globalize、DevExtreme本地化消息和devextreme-cldr-data的环境声明：
typingsd.ts
declare module 'globalize' {const value: any;export default value;}declare module 'devextreme/localization/messages/*' {const value: any;export default value;}declare module 'devextreme-cldr-data/*' {const value: any;export default value;}
或者，您可以使用 Intl 作为更轻量级的本地化解决方案。
导入DevExtreme模块
跳转到将在其中使用DevExtreme UI组件的NgModule并导入所需的DevExtreme模块，请注意如果在应用程序中配置了tree shaking，您可以从devextreme-angular导入模块，否则应该从特定文件中导入它们。
app.module.ts
// ...import { DxButtonModule } from 'devextreme-angular';// or if tree shaking is not configured// import { DxButtonModule } from 'devextreme-angular/ui/button';@NgModule({imports: [// ...DxButtonModule],// ...})export class AppModule { }
现在您可以在应用程序中使用DevExtreme UI组件：
app.component.html
<dx-buttontext="Click me"(onClick)="helloWorld()"></dx-button>app.component.tsimport { Component } from '@angular/core';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']})export class AppComponent {helloWorld() {alert('Hello world!');}}
运行应用程序
使用以下命令运行应用程序：
ng serve
打开 http://localhost:4200/ 浏览应用程序。
添加DevExtreme布局（可选）
您可以使用DevExtreme CLI将DevExtreme布局模板添加到您的应用程序。
DevExtreme | 下载试用
DevExpress技术交流群4：715863792 欢迎一起进群讨论
标签：
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！