Angular2: wie bootstrap-tagsinput richtig zu verwenden

Question

Ich versuche bootstrap-tagsinput Bibliothek in meinem Angular2-Projekt zu verwenden. Die Bibliothek wird installiert mit package.json Datei:

"dependencies": { 
    ... 
    "bootstrap-tagsinput": "^0.7.1", 
    ... 
    } 

Jetzt habe ich einen bootstrap-tagsinput Ordner in node_modules. Ich möchte Tags in einer bestimmten Komponente verwenden. Ich sah, dass es eine bootstrap-tagsinput-angular.js Datei im node_modules/bootstrap-tagsinput/dist Verzeichnis gibt, aber ich kann es nicht richtig benutzen.

Soll ich die JS-Datei in meine index.html einfügen, damit bootstrap-tagsinput für alle Komponenten verfügbar ist? Oder gibt es eine Möglichkeit, es genau dort zu importieren, wo es gebraucht wird?

In anderer Art und Weise, ist es eine Möglichkeit, so etwas zu tun:

mycomponent.component.html:

<input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput"/> 

mycomponent.component.ts:

import {Component, AfterViewInit} from '@angular/core'; 
import {TagsInputComponents} from 'bootstrap-tagsinput'; // Something like that?!? 

@Component({ 
    ... 
}) 

export class MyComponentComponent implements AfterViewInit { 

    ngAfterViewInit():any { 
     $('input').tagsinput('refresh'); 
    } 
} 

Dank viel für deine Hilfe!

Answer 1

Ich kann ein Problem bei der Verwendung von Bootstrap-Tags-Eingabe mit eckigen Batter zu sehen, um ngTagsInput zu verwenden, wenn Sie angular verwenden.

Bitte beachten Sie weitere Details unter: ngTagsInput, demo

Answer 2

der Bootstrap-tagsinput ist eine Richtlinie. So können Sie Somethings wie folgt benötigen:

Schritt 1: Import Bootstrap-tagsinput

import {TagsInputComponents} from 'bootstrap-tagsinput'; 

Schritt 2: In den Richtlinien

@Component({ 
    ... 
    directives: [TagsInputComponents], 
    ... 
}) 

es dann in der Ansicht verwenden.

Hoffe diese Hilfe!

Answer 3

Für alle, die eine einfachere Lösung suchen. Ich landete angular2-tag-input

Zuerst mit bis Sie Ihren Knoten Eingabeaufforderung

npm install angular2-tag-input --save 

Dann sind sie in Ihrem Modul

// In one of your application NgModules 
import {RlTagInputModule} from 'angular2-tag-input'; 


    @NgModule({ 
     imports: [ 
     RlTagInputModule 
     ] 
    }) 


// In one of your component templates 
<rl-tag-input [(ngModel)]="tags" placeholder="Testing placeholder"></rl-tag-input> 

// In one of your component ts file 
var tags= ['tag1','tag2','tag3']