Tags Eingabe mit Angular2/Ionic2

Question

Ich bin auf der Suche nach Tags Eingabe mit Angular2 in Ionic2. Ähnlich wie Bootstrap Tags Input

Kann jemand mit dem Dokument oder Beispiel helfen. Aber nur mit Angular2! in Ionic2.

Answer 1

Ich denke, Sie können das nicht mit dem Element ion-input von Ionic2 tun, aber Sie können diese Funktion mit nur ein paar Stilregeln und ein paar Zeilen Code erstellen.

Dort verwende ich nur ein Array von Strings, die Tags

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

Und einige Arten zu zeigen, um sie richtig zu zeigen:

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

Hinweis: ich nicht erstellen eine benutzerdefinierte Anweisung in dieser Demo, um es einfach und leicht zu verstehen, aber bedenken Sie, dass eine bessere Implementierung wäre, wenn Sie diese Tags auf mehreren Seiten verwenden (oder vielleicht mehr Funktionen hinzufügen möchten) extrahiere die Vorlage, die Stile an d das Verhalten in eine getrennte Komponente und verwenden Sie es wie eine Direktive in der übergeordneten Komponente.