Angular Material 7 – Chips

在Angular Material 7中，Chip是一种无处不在的UI组件。它可以让您在网站或应用程序中带有一些元素的标记/处理。它可以帮助您轻松地收集和显示信息，如用户的联系信息或行动。这篇文章会介绍什么是Angular的Chip组件以及如何使用。

简介

Chips是一个非常流行的UI元素，非常适合为Angular网站和应用程序提供一个易于使用和非常有用的元素。一个Chip实际上是一个非常小的图形，通常是一个图标和一些文本。Chips可以通过点击或其他事件在应用程序中交互和操作。

安装和导入Angular Material 7

我们需要先在我们的应用程序中安装Angular Material 和 Angular CDK库。在终端中运行以下命令：

$ npm install –save @angular/material @angular/cdk

在我们的app.module.ts文件中导入Angular Material 7

import {MatChipsModule} from '@angular/material/chips';

使用Angular Material 7的Chip组件

在这个例子中，我们可以看到一个简单的Angular Material 7的Chip组件。

<mat-chip-list>
  <mat-chip>HTML5</mat-chip>
  <mat-chip>CSS3</mat-chip>
  <mat-chip>Angular Material 7</mat-chip>
  <mat-chip>Chips</mat-chip>
</mat-chip-list>

从上面的代码片段中我们可以看到Angular Material 7的Chip组件有一个包含一个或多个Chip的MatChipList。
这一点很重要，因为MatChipList告诉Angular Material 7应该如何布局和呈现Chips。在MatChip中，您可以插入文本，图像以及指定其他属性。

以下是可选的属性：
– color – 可以设置Chip的背景色。
– removable – 可以让Chip在点击”删除按钮”时删除。

以下是一个简单的示例代码：

<mat-chip-list>
  <mat-chip color="primary" removable="true">HTML5</mat-chip>
  <mat-chip color="accent">CSS3</mat-chip>
  <mat-chip color="warn" >Angular Material 7</mat-chip>
  <mat-chip >Chips</mat-chip>
</mat-chip-list>

在上面的代码片段中，Color属性是在每个Chip中设置的，以便我们可以根据我们的需要自定义每个Chip的背景颜色。

带图标的Chip示例

以下是一个带有图标的Angular Material 7的Chip组件示例。在这里，我们将使用MatIcon的MatIconRegistry组件来显示我们的图标。

<!-- Import MatIconRegistry -->
import { MatIconRegistry } from '@angular/material/icon';

// add icons
constructor(iconRegistry: MatIconRegistry) {
    iconRegistry.addSvgIcon(
      'thumbs-up',
      sanitizer.bypassSecurityTrustResourceUrl('assets/img/examples/thumbup-icon.svg'));
}

我们已经导入了MatIconRegistry并添加了一个名为“thumbs-up”的SVG图标。现在，我们创建一个新的Chip组件，并在里面包含一个图标。

<mat-chip-list>
  <mat-chip>
    <mat-icon svgIcon="thumbs-up" aria-hidden="true"></mat-icon>
    <span>Angular Material 7 is awesome!</span>
  </mat-chip>
  <mat-chip>
    <span>Chips</span>
    <mat-icon color="primary" aria-hidden="true">folder</mat-icon>
  </mat-chip>
  <mat-chip>
    <mat-icon color="primary" aria-hidden="true">build</mat-icon>
    <span>Angular Material 7</span>
  </mat-chip>
</mat-chip-list>

在上面的代码片段中，我们可以看到在我们的MatChip组件中，有一个MatIcon组件，其中包含了我们先前创建的“thumbs-up” SVG图标。另外，我们还使用了一个图标，它代表了一个文件夹。

Chip示例-带删除按钮并跟踪项目

以下是一个在Angular Material 7中带有删除按钮的Chip组件示例。您可以看到，当我们单击“删除按钮”时，MatChip的MatChipEvent事件将发出。

<mat-chip-list>
  <mat-chip *ngFor="let item of actionsArray" [selectable]="selectable"
           [removable]="removable" (removed)="remove(item)">
    <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    {{item.name}}
  </mat-chip>
</mat-chip-list>

在我们的组件.ts文件中，我们需要声明一些变量和方法来处理MatChipEvents事件和跟踪我们正在使用的项目。

import {MatChipEvent} from '@angular/material/chips';

selectable: boolean = true;
removable: boolean = true;
actionsArray = [
  {name: 'Action 1'},
  {name: 'Action 2'},
  {name: 'Action 3'},
  {name: 'Action 4'},
  {name: 'Action 5'},
  {name: 'Action 6'},
  {name: 'Action 7'},
  {name: 'Action 8'},
];

remove(item: any): void {
  const index = this.actionsArray.indexOf(item);

  if (index >= 0) {
    this.actionsArray.splice(index, 1);
  }
}

在上面的代码片段中，我们声明了一个名为“actionsArray”的项目数组，它包含我们要跟踪的一些项目。我们还声明了一个名为“selectable”的变量，该变量在Chips中可以让我们选择哪些项目并跟踪它们。最后，我们还声明了一个名为“remove”的方法，该方法接收一个参数，其中包含需要从数组中删除的“item”对象。

结论

Chips是一个非常强大，易于使用的Angular Material 7 UI组件。您可以使用它来收集用户数据，展示信息或任何其他类似的情况。在本文中，我们介绍了Angular Material 7的基本Chip组件，以及如何使用相关属性和方法来进行格式设置。通过实践和使用，您可以深入了解Chip组件，并在自己的应用程序中集成他们。