Angular 有标签输入组件吗？答案

【问题标题】：Is there a Tags Input component for Angular?Angular 有标签输入组件吗？
【发布时间】：2018-03-18 12:58:42
【问题描述】：

我正在寻找一个特定的 Angular 组件，它的工作方式与 Bootstrap Tags Input 类似

谁能帮我找到一个开箱即用的组件或提供一些实现示例？我需要 Angular 4

【问题讨论】：

✔Tagify 太棒了！
MatChips 也很棒

标签： angular bootstrap-tags-input

【解决方案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

【讨论】：

谢谢克里斯蒂安，但不幸的是我不使用棱角材料，我不能在这个项目中使用它，所以如果你有其他解决方案，我将不胜感激
如果不能使用任何外部模块那就没有办法了，只能自己创建了
我已经使用了外部模块，但我需要这些标签来完成我的项目，所以我认为仅出于该目的包含有角度的材料会很糟糕，因为我不会在其他任何事情上使用它跨度>
幸运的是，角度材料是模块化的，因此您无需导入整个框架，只需导入您需要的部分：) 只是必不可少的
不要将 UI 术语误认为框架术语。人们可能正在使用 Angular 而不是 Material。而“芯片”这个名称来自 Material UI，而不是来自应用程序框架 Angular。

【解决方案2】：

在我一次又一次地搜索之后，我终于找到了这个组件，它对我有用它看起来像MatChipsModule 用于具有一些很酷功能的棱角材料ngx-chips

【讨论】：

可悲的是，它有它的错误，而且很久以前就没有维护了。