Angular2 : bootstrap-tagsinput을 올바르게 사용하는 방법

Question

내 Angular2 프로젝트에 bootstrap-tagsinput 라이브러리를 사용하려고합니다.

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

가 지금은 node_modules에 bootstrap-tagsinput 폴더가 : 라이브러리는 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을 사용하는 데 몇 가지 문제가 있습니다. demo

Answer 2

부트 스트랩-tagsinput이 지침이다 ngTagsInput :

은에서 자세한 내용을 참조하시기 바랍니다. 그래서 당신은 다음과 같이 일도 필요 할 수 있습니다

1 단계 : 수입 부트 스트랩 - tagsinput

import {TagsInputComponents} from 'bootstrap-tagsinput'; 

2 단계 : 다음 지시

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

에 담기보기에 그것을 사용할 수 있습니다.

희망이 도움이됩니다.

Answer 3

쉬운 솔루션을 원하는 사람 누구에게나. 난 당신이

npm install angular2-tag-input --save 

그런 다음

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