Angular2：如何正確使用bootstrap-tagsinput

我想在我的Angular2項目中使用bootstrap-tagsinput庫。Angular2：如何正確使用bootstrap-tagsinput

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

現在我有一個bootstrap-tagsinput文件夾中node_modules：該庫是用package.json文件進行安裝。我想在特定組件中使用tagsinput。我看到node_modules/bootstrap-tagsinput/dist目錄中有一個bootstrap-tagsinput-angular.js文件，但我無法正確使用它。

我應該在我的index.html中添加JS文件，這樣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'); 
    } 
}

感謝很多爲您的幫助！

來源

2016-07-24 DavidL

如果您使用的是角度，我可以在使用角度擊球者的引導標籤輸入來使用ngTagsInput時看到一些問題。

請查看更多詳情在：ngTagsInput，demo

來源

2016-07-29 10:38:37 jayesh

我們可以使用ngTagsInput與角2？ –

的自舉-tagsinput是一個指令。所以，你可以根據需要出頭如下：

第1步：導入的自舉-tagsinput

import {TagsInputComponents} from 'bootstrap-tagsinput';

第2步：加入指令

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

然後在視圖中使用它。

希望得到這個幫助！

來源

2016-08-03 03:20:36

現在不能檢查，而是從'bootstrap-tagsinput'中導入{TagsInputComponents};'不是有效的語法（我的IDE中的錯誤 - Webstorm）。你有沒有設法以這種方式使用這個組件？ – DavidL

您可以轉換boostrap-tagsinput以在angular2中使用或在[here]（https://www.npmjs.com/package/angular2-tag-input）中使用angular2-tag-input –

適用於尋找更簡單解決方案的任何人。最後我用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']

來源

2016-12-26 17:37:22

Angular2：如何正確使用bootstrap-tagsinput

回答

相關問題