Angular 是否有标签输入组件？

Question

我正在寻找 Angular 的特定组件，其工作方式与 Bootstrap Tags Input

类似

任何人都可以帮我找到一个开箱即用的组件或提供一些实施示例吗？我需要 Angular 4

Answer 1

TL;DR 在 Angular 中，该类型的组件被命名为 chip。更改您的关键字，您会发现更好的结果。

有很多方法可以到达，最常见的是通过Angular Material。

首先，在 official tutorial 之后的项目中安装 Angular Material。幸运的是它写得很好，我认为你不会有问题。

然后，在你要看标签的组件中导入MatChipsModule，这样：

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

最后您可以在模板中使用该组件了：

<mat-chip-list>
  <mat-chip *ngFor="let i of items" [selectable]="selectable"
           [removable]="removable" (remove)="remove(i)">
    {{i.tagName}}
    <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
  </mat-chip>
</mat-chip-list>

来源：https://material.angular.io/components/chips/overview

Answer 2

经过我一次又一次的搜索，我终于找到了这个组件并且它适用于我它看起来像 angular material 中使用的 MatChipsModule，具有一些很酷的功能 ngx-chips

Angular 是否有标签输入组件？

Is there a Tags Input component for Angular?

angular

bootstrap-tags-input