8

我正在尝试在我的 Angular2 项目中使用bootstrap-tagsinput库。该库是使用package.json文件安装的：

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

现在我有一个bootstrap-tagsinput文件夹node_modules。我想在特定组件中使用 tagsinput。我看到目录中有一个bootstrap-tagsinput-angular.js文件node_modules/bootstrap-tagsinput/dist，但我无法正确使用它。

我是否应该在我的 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');
    }
}

非常感谢你的帮助！

4

3 回答 3

2

如果您使用 angular，我可以看到在使用带有角面糊的 bootstrap-tags-input 来使用 ngTagsInput 时会出现一些问题。

请在以下位置查看更多详细信息：ngTagsInput，演示

于 2016-07-29T10:38:37.560 回答
2

boostrap-tagsinput 是一个指令。因此，您可能需要以下内容：

第 1 步：导入 boostrap-tagsinput

import {TagsInputComponents} from 'bootstrap-tagsinput';

第 2 步：添加到指令

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

然后在您的视图中使用它。

希望这有帮助！

于 2016-08-03T03:20:36.327 回答
0

对于任何寻求更简单解决方案的人。我最终使用了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-26T17:37:22.720 回答