Как я могу использовать Selectize.js с Angular2?

Question

Я пытаюсь реализовать Selectize.js с Angular2, но я не могу заставить его работать. Вот что я попробовал в компоненте HTML:

  <div class="form-group">
    <label for="friends">Friends</label>
    <input type="text" class="form-control" #friends
            [(ngModel)]="user.friends" name="friends"
            #picture="ngModel">
  </div>

И в компоненте:

declare let $: any;

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  providers: [ AuthenticationService, UserService, MessageService ]
})
export class ProfileComponent implements OnInit, AfterViewInit  {
  @ViewChild('friends') el:ElementRef;

  constructor(
    private _userService: UserService,
    private _authService: AuthenticationService,
  ) { }

  ngAfterViewInit() {

    $('#friends').selectize({
      delimiter: ',',
      persist: false,
      create: function(input) {
        return {
          value: input,
          text: input
        }
      }
    });
  }

  ngOnInit() {

    //...
  }

  onSubmit(event) {
    //...
  }

}

Поэтому я пытаюсь реализовать Selectize в комментариях друзей. Я хочу, чтобы пользователь мог написать имена своих друзей, а затем восстановить их в Angular с помощью массива имен.

Но ничего не происходит в интерфейсе, Selectize ничего не делает. Как так?

Answer 1

Надеюсь, чтобы сделать это немного проще, я создал компонент ng2-selectize, доступный на github & npm.

Его использование может быть:

export class MultiSelectExampleComponent {
  options = [{
  label: 'Angular 2',
  value: 'angular2'
 }, {
  label: 'ReactJS',
  value: 'reactjs'
 }
  ];
  config = {
    labelField: 'label',
    valueField: 'value',
    highlight: false,
    create:false,
    persist:true,
    plugins: ['dropdown_direction', 'remove_button'],
    dropdownDirection: 'down',
    maxItems: 5
  };
  placeholder: string = 'Placeholder...';
  value:string[];

  onValueChange($event) {
    console.log("Option changed: ", $event);
  }
}
  

<div class="example">
    <ng2-selectize [config]="config" [options]="options" [placeholder]="placeholder" [(ngModel)]="value" (ngModelChange)="onValueChange($event)"></ng2-selectize>
</div>

Answer 2

Я использую этот https://www.npmjs.com/package/ng-selectize

И он отлично работает в моем проекте angular 5

Answer 3

Двухсторонняя привязка данных к selectize не работает в angular2, поэтому избавьтесь от этих ngModels. Вместо этого я выполняю функции onItemAdd и onItemRemove в selectize, вот так:

activateSelectize() {
    var $selecitize= jQuery('.selectize');

    this.select= $selectize.selectize({
        delimiter: ',',
        create: (input) => {
            return {
                value: input,
                text: input
            };
        },
        onItemAdd: (value) => {
            this.updateValue({selected: value});
        },
        onItemRemove: (value) => {
            this.updateValue({deselected: value});
        },
    });
 }

И это HTML:

<select class="selectize">
        <option *ngFor="let option of options" value="{{option[0]}}">{{option[1]}}</option>
</select>

Answer 4

Чтобы заставить selectize.js работать с (проверено Angular 8) без плагинов ng2-selectize (дополнительный вес), вы можете сделать следующее:

Установите плагин через NPM:

npm i selectize

Затем установите типы, чтобы получить доступ к intellisense, а также удалите все необъявленные методы, которые машинописный текст не понимает и которые связаны с selectize.

npm i @types/selectize

Теперь в вашем компоненте вам нужно импортировать плагин, сделайте это следующим образом: (убедитесь, что ваш путь к node_modules правильный в вашем приложении из вашего компонента)

import 'node_modules/selectize/dist/js/standalone/selectize.js';

Вам понадобится jQuery, если вы еще не импортировали / не установили его. Теперь в вашем компоненте используйте метод AfterViewInit() - при загрузке при первой инициализации страницы, чтобы вы знали, что DOM создана. Вот так:

    ngAfterViewInit() {
      $(<selector>).selectize({<options-object>});
}

Затем, аналогично тому, что предлагает Роб, используйте один из следующих методов, которые предлагает Selectize: документация здесь

onChange: (value) => {}, onItemAdd: (value, $item) => {}

Это должно помочь вам начать работу с плагином, вам нужно будет импортировать темы CSS или использовать свой собственный стиль.