往Angular应用程序中添加DevExtreme

To start this tutorial, you need an Angular 5+ application created using the Angular CLI. Refer to the Angular CLI documentation for @R_736_4045@ion on how to create such an application. You can also create an Angular application with DevExtreme already added to it.

一键安装

你可以用npx命令安装配置DevExtreme以及相关依赖npx是 DevExtreme CLI的一部分:

npx -p devextreme-cli devextreme add devextreme-angular

注意

npx 在 npm v5.2 及更高版本上有效。假如你用的是早期版本，升级npm或安装全局DevExtreme CLI，然后运行命令：
npm i -g devextreme-cli
devextreme add devextreme-angular

运行完命令后，你可以直接跳过以下的文章，直接导入 DevExtreme 模块。

要是命令因某些原因不可用，以下指令可用于手动配置。

安装 DevExtreme

安装 devextreme 与 devextreme-angular 的 npm 包：

npm install [email protected] [email protected] --save --save-exact

注意

因为DevExtreme没有使用Semantic版本管理，我们建议使用指定版本的DevExtreme，防止不必要的升级。我们的版本管理系统中，第一个和中间的数字表示主版本，包括行为的变更。

配置样式表

打开 angular.json ，引入 dx.common.css 及预定义的主题样式表 (dx.light.css )。

angular.json

{
  "projects": {
    "ProjectName": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/devextreme/dist/css/dx.common.css",
              "node_modules/devextreme/dist/css/dx.light.css",
              "src/styles.css"
            ],
            ...
          },
          ...
        },
        ...
      }
    },
    ...
  },
  ...
}

对于Angular CLI 6 之前的版本，修改 angular-cli.json 成如下：

angular-cli.json

{
  "apps": [{
    "styles": [
      ...
      "../node_modules/devextreme/dist/css/dx.common.css",
      "../node_modules/devextreme/dist/css/dx.light.css",
      "styles.css"
    ],
    ...
  }],
  ...
}

注意

基于SVG的小部件不需要主题样式。你要是引用了这些样式，则小部件应用匹配的外观。

Angular CLI 6+ 中注册第三方依赖

JSZip 注册

如果你要使用 DataGrid 小部件，在tsconfig.json里注册JSZip库。这个小部件使用该库在客户端导出Excel。

tsconfig.json

{
  ...
  "compilerOptions": {
    ...
    "paths": {
      "jszip": [
        "node_modules/jszip/dist/jszip.min.js"
      ]
    }
  }
}

全局注册

你如果想语言本地化，要先安装这个包和 devextreme-cldr-data 扩展：

npm install --save-dev devextreme-cldr-data globalize

接着在tsconfig.json中注册语言包和 CLDR 脚本scripts ……

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/*"
      ],
      "jszip": [
        "node_modules/jszip/dist/jszip.min.js"
      ]
    }
  }
}

……然后在src中创建 typings.d.ts 文件，Globalize, DevExtreme 本地消息, 及 devextreme-cldr-data:

typings.d.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;
}

使用Angular CLI 5或更早版本的项目， config.js 的配置如下：

config.js

System.config({
    // ...
    paths: {
        "npm:": "node_modules/"
    },
    map: {
        // ...
        "globalize": "npm:globalize/dist/globalize",
        "cldr": "npm:cldrjs/dist/cldr",
        "cldr-data": "npm:cldr-data",
        "json": "npm:systemjs-plugin-json/json.js",
    },
    packages: {
        app: {
            // ...
            "globalize": {
                main: "../globalize.js",
                defaultExtension: "js"
            },
            "cldr": {
                main: "../cldr.js",
                defaultExtension: "js"
            }
        }
    }
});

参考使用全球化的文章示例。

另外，可使用 Intl 这种更轻量的本地化方案。

导入DevExtreme 模块

找到将使用DevExtreme组件的 NgModule ，导入需要的 DevExtreme 模块。注意，如果应用程序中配置了撼树，则可以用 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 组件了：

app.component.htmlapp.component.ts

<dx-button
    text="Click me"
    (onClick)="helloWorld()">
</dx-button>

运行应用程序

运行应用程序的命令如下：

ng serve
Open http://localhost:4200/ to browse the application