Angular2：如何正确使用引导标签输入答案

【问题标题】：Angular2: how to use bootstrap-tagsinput properlyAngular2：如何正确使用引导标签输入
【发布时间】：2016-11-27 19:43:08
【问题描述】：

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

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

现在我在node_modules 中有一个bootstrap-tagsinput 文件夹。我想在特定组件中使用 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');
    }
}

非常感谢您的帮助！

【问题讨论】：

标签： javascript angularjs angular systemjs bootstrap-tags-input

【解决方案1】：

适合任何寻求更简单解决方案的人。我最终使用了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']

【讨论】：

【解决方案2】：

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

第 1 步：导入 boostrap-tagsinput

import {TagsInputComponents} from 'bootstrap-tagsinput';

第 2 步：添加到指令

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

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

希望对您有所帮助！

【讨论】：

现在无法检查，但 import {TagsInputComponents} from 'bootstrap-tagsinput'; 不是有效语法（我的 IDE 中的错误 - Webstorm）。您是否设法以这种方式亲自使用该组件？
您可以将 boostrap-tagsinput 转换为在 angular2 中使用，或者在 here 使用 angular2-tag-input

【解决方案3】：

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

详情请见：ngTagsInput, demo

【讨论】：

我们可以在 Angular 2 中使用 ngTagsInput 吗？