Angular2: как правильно использовать bootstrap-tagsinput

Я пытаюсь использовать библиотеку bootstrap-tagsinput в своем проекте Angular2. Библиотека устанавливается с помощью package.json файла:

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

Теперь у меня есть папка bootstrap-tagsinput в node_modules. Я хочу использовать tagsinput в определенном компоненте. Я видел, что в каталоге node_modules/bootstrap-tagsinput/dist есть файл bootstrap-tagsinput-angular.js, но мне не удалось правильно его использовать.

Должен ли я добавить файл JS в свой index.html, чтобы bootstrap-tagsinput был доступен для всех компонентов? Или есть способ импортировать его именно туда, где он нужен?

Другими словами, есть ли способ сделать что-то вроде этого:

мойкомпонент.компонент.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 angular angularjs systemjs bootstrap-tags-input
person DavidL    schedule 24.07.2016    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Я вижу некоторую проблему в использовании bootstrap-tags-input с угловым тестом для использования ngTagsInput, если вы используете angular.

Дополнительные сведения см. по адресу: ngTagsInput, демонстрация

person jayesh    schedule 29.07.2016
comment
можем ли мы использовать ngTagsInput с Angular 2? - person Mahin Khan; 22.12.2016

arrow_upward
2
arrow_downward

boostrap-tagsinput — это директива. Таким образом, вам могут понадобиться следующие вещи:

Шаг 1: Импортируйте входной сигнал boostrap-tags

import {TagsInputComponents} from 'bootstrap-tagsinput';

Шаг 2: Добавьте в директивы

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

затем используйте его в своем представлении.

Надеюсь, это поможет!

person Ha Hoang    schedule 03.08.2016
comment
Не могу проверить прямо сейчас, но import {TagsInputComponents} from 'bootstrap-tagsinput'; не является допустимым синтаксисом (ошибка в моей среде IDE — Webstorm). Удалось ли вам использовать компонент таким образом лично? - person DavidL; 03.08.2016
comment
Вы можете либо преобразовать boostrap-tagsinput для использования в angular2, либо использовать angular2-tag-input по адресу здесь. - person Ha Hoang; 03.08.2016

arrow_upward
0
arrow_downward

Для тех, кто ищет более простое решение. В итоге я использовал 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']
person Mahin Khan    schedule 26.12.2016