jquery - 如何在 Angular2 中使用 jQuery 插件？插件先运行，DOM 更新后

Question

我的目标是在 angular2 中应用 jQuery 插件。它可以是任何插件，如 jQuery.DataTable、bootstrap-select 等。

我正在做的是从服务中获取数据。服务发出 ajax 请求。我使用 ngFor 绑定(bind)将数据绑定(bind)到 select 或表，然后调用 jQuery 插件函数(使用定义文件)来呈现正确的插件。

这里的问题是时差。在第一步中，我绑定(bind)数据，在第二步中，我应用插件，但我认为绑定(bind)有点慢，因此插件的代码在实际绑定(bind) html 渲染之前运行。这给我带来了问题。

示例代码如下:

private loadPermissionGroups() {
        this.permissionManagerService.getPageData()
            .subscribe(res => {
                this.employeeList = res.Data.PageData.EmployeeList;
                // applyDataTable jQuery code
            },
            null,
            () => {
                this.showLoading = false;
            });
    };

请提出建议。

Answer 1

您还可以使用指令:

/**
 * [Directive description]
 * @param {"[custom-dropdown]"}} {  selector [Directive for adding jQuery for select box]
 */

@Directive({
   selector: "[custom-dropdown]"
})


/**
 *[Class description]
 */
export class customDropdown implements AfterViewInit {
  constructor(public el: ElementRef) {}

  ngAfterViewInit() {
    $(this.el.nativeElement).selectpicker();
  }
}

希望这对您有帮助。