Question

我正在尝试在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');
    }
}

非常感谢你的帮助！

Answer 1

如果使用angular，我可以看到使用bootstrap-tags-input with angular batter来使用ngTagsInput的一些问题。

请在以下网址查看更多详情：ngTagsInput，demo

Answer 2

boostrap-tagsinput是一个指令。所以你需要一些事情如下：

步骤1：导入boostrap-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']

Angular2：如何正确使用bootstrap-tagsinput

3 个答案: