Теги Вход с использованием Angular2/Ionic2

Question

Я ищу теги Вход с использованием Angular2 в Ionic2. Как Bootstrap Tags Input

Может ли кто-нибудь помочь с документом или примером. Но используя только Angular2! в Ionic2.

Answer 1

Я думаю, вы не можете сделать это с помощью элемента ion-input от Ionic2, но вы можете создать эту функцию только с несколькими правилами стиля и несколькими строками кода.

Там, я просто используя массив строк, чтобы показать теги

<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 поведение в отдельный компонент и использование его как директива в родительском компоненте.