使用 Angular2 / Ionic2 标签输入

Question

我正在寻找在 Ionic2 中使用 Angular2 的标签输入。类似于Bootstrap Tags Input

我正在寻找一个仅在 Ionic 2 中使用 Angular2 的示例。

Answer 1

我认为你不能使用 Ionic2 中的 ion-input 元素来做到这一点，但你可以通过几条样式规则和几行代码来构建该功能。

在那里，我只是使用一个字符串数组来显示标签

  <div class="tag-container">
    <span class="tag" *ngFor="let tag of tags">
      {{ tag }}
      <ion-icon name="close" (click)="deleteTag(tag)"></ion-icon>
    </span>
  </div>

还有一些可以正确显示它们的样式：

.tag-container {
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  padding: 10px;
  margin: 10px;
}

.tag {
  display: inline-block;
  background-color: #5bc0de;
  color: #fff;
  margin: 5px 5px;
  padding: 2px 5px;
}

注意：我没有在该演示中创建自定义指令以使其简单易懂，但请记住，如果您要在多个页面中使用这些标签（或者您可能想向它们添加更多功能）更好的实现是将模板、样式和行为提取到一个单独的组件中，并像父组件中的指令一样使用它。