Angular 2 - 带有 JQuery 和 Select2 的指令

Question

我在@Component 中有一些<select class='select'>。

我正在关注一个模板，该模板使用名为 Select2 的第三方库为每个选择设置样式。 HTML + jQuery + Select2 代码为：

$( document ).ready(function() {
    $('.select').select2();
});

我想知道为此创建一个指令是否是个好主意，所以我尝试了：

import {Directive, ElementRef} from '@angular/core';

@Directive({
  selector: '[simple-dropdown]'
})
export class SimpleDropdownDirective {

  constructor(el: ElementRef) {
    $(el.nativeElement).select2();
  }

}

但我在 select2() 方法上遇到错误。由于它是一个第三方库，我不认为我可以像使用 jQuery 那样安装它。

你有什么建议？

Answer 1

Select2 依赖于 jQuery，所以这不是开箱即用的。

当你使用 jQuery 选择一个元素时，你得到的不是原生元素，而是 jQuery 增强的元素。 您可以选择将 Select2 移植到 Angular 2，或者让它与原生浏览器 API（如 querySelectorAll）一起使用。 （您也可以尝试向作者提出功能请求，但由于 Select2 将自己声明为依赖于 jQuery，我不会打赌实现它。）