如何使用 和 在 Angular Material 中？

在 Angular Material 中， 和 可以用来创建类似标签或小卡片的图形界面元素。

常规用法

要使用 和 ，需要首先导入 Angular Material 的相关模块：

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

然后，在组件 HTML 文件中，可以这样使用 和 ：

<mat-chip-list>
  <mat-chip *ngFor="let fruit of fruits">{{fruit}}</mat-chip>
</mat-chip-list>

这段代码会创建一个包含多个 元素的列表，每个 元素表示一个水果。

自定义样式

除了常规用法之外， 还可以通过提供自定义模板来自定义样式。要使用自定义模板，可以将 HTML 代码放在 标签内。例如：

<mat-chip>
  <img src="https://example.com/fruit.jpg" alt="Fruit">
  {{fruit}}
</mat-chip>

这段代码在 中嵌套了一个图片元素和一个文本节点。在实际应用中，可以根据个人需求来自定义自己的模板。

附加事件

还支持附加事件，例如点击事件。要处理点击事件，可以使用 Angular 的事件绑定机制。例如：

<mat-chip *ngFor="let fruit of fruits" (click)="onChipClicked(fruit)">{{fruit}}</mat-chip>

这段代码在每个 元素上绑定了一个点击事件，并将被点击的水果名称作为参数传递给组件中的 onChipClicked 方法。

以上就是如何使用 和 在 Angular Material 中的介绍。如果您想了解更多，请参考官方文档。