कोणीय 2: बूटस्ट्रैप-टैगिनपुट का उपयोग कैसे करें

Question

मैं अपने Angular2 प्रोजेक्ट में bootstrap-tagsinput लाइब्रेरी का उपयोग करने का प्रयास कर रहा हूं।

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

अब मैं node_modules में एक bootstrap-tagsinput फ़ोल्डर है: पुस्तकालय package.json फ़ाइल का उपयोग कर स्थापित किया गया है। मैं एक विशिष्ट घटक में टैगिनपुट का उपयोग करना चाहता हूं। मैंने देखा कि node_modules/bootstrap-tagsinput/dist निर्देशिका में bootstrap-tagsinput-angular.js फ़ाइल है, लेकिन मैं इसे ठीक से उपयोग करने में प्रबंधित नहीं कर सकता।

क्या मुझे अपने index.html में जेएस फ़ाइल जोड़नी है तो बूटस्ट्रैप-टैगिनपुट सभी घटकों के लिए उपलब्ध होगा? या क्या इसे आयात करने का कोई तरीका है जहां इसकी आवश्यकता है?

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 का उपयोग करने के लिए कोणीय बल्लेबाज के साथ बूटस्ट्रैप-टैग-इनपुट का उपयोग करने में कुछ समस्या देख सकता हूं।

कृपया अधिक विवरण देखने के: ngTagsInput, demo

Answer 2

बूटस्ट्रैप-tagsinput एक निर्देश है। तो अगर आप इस प्रकार somethings की जरूरत कर सकते हैं:

चरण 1: आयात बूटस्ट्रैप-tagsinput

import {TagsInputComponents} from 'bootstrap-tagsinput'; 

चरण 2: निर्देशों

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

में जोड़े तो अपने ध्यान में रखते हुए इसका इस्तेमाल।

इस सहायता की आशा करें!

Answer 3

किसी भी व्यक्ति के लिए आसान समाधान ढूंढ रहे हैं। मैं का उपयोग कर angular2-tag-input

सबसे पहले आप अपने नोड कमांड प्रॉम्प्ट से चलाना होगा

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