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

回答

相关问题