标签使用Angular2/Ionic2输入

Question

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

任何人都可以帮助文档或示例。但只使用Angular2！在Ionic2中。

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; 
} 

注：我没有创建该演示中的自定义指令使其简单易懂，但请记住，如果要在多个页面中使用这些标记（或者您想为其添加更多功能），更好的实现方法是提取模板，样式和d将行为转换为分离的组件，并将其用作父组件中的指令。