標籤使用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將行爲轉換爲分離的組件，並將其用作父組件中的指令。