国产自产精品一区精品,三级日韩欧美在线,97综合

DevExtreme初級入門教程（Angular篇）：如將DevExtreme添加到Angular CLI應用程序

原創|使用教程|編輯：龔雪|2021-07-27 09:51:48.433|閱讀 237 次

概述：本文主要介紹如何將DevExtreme添加到Angular CLI應用程序中，歡迎下載最新版工具體驗！

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

相關鏈接：

在開始本教程之前，您需要一個使用 Angular CLI 創建的 Angular 7+ 應用程序。

DevExtreme v21.1最新版下載

一鍵設置

您可以使用作為 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 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;
}

或者，您可以使用作為更輕量級的本地化解決方案。

導入DevExtreme模塊

跳轉到將在其中使用DevExtreme UI組件的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 UI組件：

app.component.html

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

app.component.ts

import { 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

打開 //localhost:4200/ 瀏覽應用程序。

添加DevExtreme布局（可選）

您可以使用DevExtreme CLI將DevExtreme布局模板添加到您的應用程序。

DevExtreme | 下載試用

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應式UI小部件集合，可在傳統Web和下一代移動應用程序中使用。該套件附帶功能齊全的數據網格、交互式圖表小部件、數據編輯器等。

DevExpress技術交流群4：715863792 歡迎一起進群討論