Angular2：適切にbootstrap-tagsinputを使用する方法

Question

私はAngular2プロジェクトでbootstrap-tagsinputライブラリを使用しようとしています。今、私はnode_modulesでbootstrap-tagsinputフォルダを持っている

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

：ライブラリはpackage.jsonファイルを使用してインストールされています。特定のコンポーネントでtagsinputを使用したいと思います。 node_modules/bootstrap-tagsinput/distディレクトリにbootstrap-tagsinput-angular.jsというファイルがありますが、正しく管理することはできません。

JSファイルをindex.htmlに追加すると、すべてのコンポーネントでbootstrap-tagsinputが利用できるようになりますか？または、必要な場所にインポートする方法はありますか？

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

おかげ他の方法で

、このような何かをする方法がありますあなたの助けにたくさん！

Answer 1

角度を使用している場合、ngTagsInputを使用するために、角度バッターでbootstrap-tags-inputを使用する際に問題が発生することがあります。ブートストラップ・tagsinputディレクティブで、ngTagsInputdemo

Answer 2

を：

で詳細をご覧ください。ですから、次のように代を必要とすることができます。

ステップ1：インポートブートストラップ・tagsinput

import {TagsInputComponents} from 'bootstrap-tagsinput'; 

ステップ2：その後、ディレクティブ

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

に追加あなたのビューでそれを使用しています。

このヘルプが必要です。

Answer 3

簡単な解決策をお探しの方にお勧めします。私はあなたのノードのコマンドプロンプト

npm install angular2-tag-input --save 

を実行する必要がありますangular2-tag-input

ファーストを使用して終了その後、あなたのモジュールに

// 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']