发布时间：2021-08-31
本文主要介绍如何安装和开始使用Kendo UI for Angular。
最新的Kendo UI for Angular包面向当前Angular长期支持版本，直到最新的官方Angular版本。
1. 开始使用Angular最简单方法是使用 Angular CLI 工具，要搭建项目结构，请按照该工具的安装说明进行操作：
npm install -g @angular/cli
ng new kendo-angular-app
ng new命令将提示您进行新Angular应用程序的一些设置，使用这些：
2. 新应用生成后，将src/app/app.component.html的内容替换为：
<h1>Hello Kendo UI for Angular!</h1>
3. 然后，在浏览器中构建并打开Angular应用程序：
cd kendo-angular-app
ng serve -o
接下来，我们将向应用程序添加一些数据，然后将其绑定到一个DropDownList和一个网格中。
通过向应用程序添加一些数据来准备使用专业的数据驱动UI组件，为简单起见，将使用静态本地 JSON 数据和可以修改来使用远程数据的服务，创建以下三个文件并从 GitHub 中的链接文件复制粘贴它们的内容：
Kendo UI for Angular是通过多个NPM包分发的，范围为@progress。向应用程序添加一个 Kendo UI Angular DropDownList，并将其绑定到一个对象数组。
1. 使用ng add命令时，DropDowns包安装需要一个步骤：
ng add @progress/kendo-angular-dropdowns
ng add命令还会自动安装默认Kendo UI主题。
2. 打开src/app/app.component.ts并从data.categories导入类别：
import { categories } from "./data.categories";
3. 在同一个文件中，声明将在DropDownList声明中使用的变量，defaultItem确定最初选择的项目：
export class AppComponent {
public dropDownItems = categories;
public defaultItem = { text: "Filter by Category", value: null };
}
4. 最后，打开src/app/app.component.html并添加DropDownList标记：
<p> <kendo-dropdownlist [data]="dropDownItems" [defaultItem]="defaultItem" textField="text" valueField="value" > </kendo-dropdownlist> </p>
DropDownList 现在应该可以在您的示例页面上运行了。
继续添加一个Kendo UI for Angular网格。
1. 首先，安装Grid npm包和所有依赖项：
ng add @progress/kendo-angular-grid
2. 在src/app/app.component.ts中导入必要的类型和数据服务：
import { GridDataResult, PageChangeEvent } from "@progress/kendo-angular-grid";
import { SortDescriptor } from "@progress/kendo-data-query";
import { ProductService } from "./product.service";
import { Observable } from "rxjs";
3. 在组件声明中添加ProductService作为提供程序：
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [ProductService]
})
4. 添加将用于对 Grid 进行分页和排序的 AppComponent 类成员：
export class AppComponent {
// ...
public gridItems: Observable<GridDataResult>;
public pageSize: number = 10;
public skip: number = 0;
public sortDescriptor: SortDescriptor[] = [];
public filterTerm: number = null;
constructor(private service: ProductService) {
this.loadGridItems();
}
public pageChange(event: PageChangeEvent): void {
this.skip = event.skip;
this.loadGridItems();
}
private loadGridItems(): void {
this.gridItems = this.service.getProducts(
this.skip,
this.pageSize,
this.sortDescriptor,
this.filterTerm
);
}
public handleSortChange(descriptor: SortDescriptor[]): void {
this.sortDescriptor = descriptor;
this.loadGridItems();
}
}
5. 最后，在 src/app/app.component.html 中添加 Grid 标记，在浏览器中重建并检查 Grid：
<kendo-grid [data]="gridItems | async" [pageSize]="pageSize" [skip]="skip" [pageable]="true"
(pageChange)="pageChange($event)" [sortable]="true" [sort]="sortDescriptor" (sortChange)="handleSortChange($event)"
[height]="400">
<kendo-grid-column field="ProductID" title="ID" width="50">
</kendo-grid-column>
<kendo-grid-column field="ProductName" title="Product Name">
</kendo-grid-column>
<kendo-grid-column field="Category.CategoryName" title="Category">
</kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Unit Price" width="140" format="{0:c}">
</kendo-grid-column>
<kendo-grid-column field="Discontinued" width="140" filter="boolean">
<ng-template kendoGridCellTemplate let-dataItem>
<input type="checkbox" [checked]="dataItem.Discontinued" disabled />
</ng-template>
</kendo-grid-column>
</kendo-grid>
我们应用程序中的 Grid 实例可以排序和分页，它使用单元格模板中的 UnitPrice 列和复选框的数字格式来显示布尔值 Discontinued 字段。
Kendo UI for Angular是Kendo UI系列商业产品的最新产品。Kendo UI for Angular是专用于Angular开发的专业级Angular组件。telerik致力于提供纯粹的高性能Angular UI组件，无需任何jQuery依赖关系。
了解最新Kendo UI最新资讯，请关注Telerik中文网！
返回