如何将 Selectize.js 与 Angular2 一起使用？答案

【问题标题】：How can I use Selectize.js with Angular2?如何将 Selectize.js 与 Angular2 一起使用？
【发布时间】：2017-03-30 09:52:19
【问题描述】：

我正在尝试使用 Angular2 实现 Selectize.js，但我似乎无法使其工作。这是我在 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 什么也没做。怎么会？

【问题讨论】：

标签： angular selectize.js

【解决方案1】：

为了希望让这更容易一些，我在 github 和 npm 上创建了 ng2-selectize 组件。

它的用法可以是：

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>

【讨论】：

【解决方案2】：

选择的双向数据绑定在 angular2 中不起作用，所以摆脱那些 ngModel。相反，我所做的是在 selectize 中实现 onItemAdd 和 onItemRemove 函数，如下所示：

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>

【讨论】：

【解决方案3】：

要让 selectize.js 在没有 ng2-selectize 插件（额外权重）的情况下使用（Angular 8 测试），您可以执行以下操作：

通过 NPM 安装插件：

npm i selectize

然后安装类型，以便您可以访问智能感知，并删除 typescript 无法理解的与 selectize 相关的任何未声明的方法。

npm i @types/selectize

现在您需要在您的组件中导入插件，执行以下操作：（确保您的应用程序中从组件到 node_modules 的路径正确）

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

如果您尚未导入/安装它，您将需要 jQuery。现在在您的组件中使用 AfterViewInit() 方法 - 如果在第一次初始化页面时加载，那么您知道 DOM 已创建。像这样：

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

然后类似于 Rob 的建议，使用以下方法之一来选择优惠：documentation here

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

这应该可以让您启动并运行该插件，您需要导入 CSS 主题或使用您自己的样式。

【讨论】：

【解决方案4】：

我正在使用这个https://www.npmjs.com/package/ng-selectize

它在我的 angular 5 项目中完美运行

【讨论】：