在 Angular 中加载 jQuery 函数 2

Question

在 Angular 2 中加载 jQuery 函数的正确方法是什么？

我已将 jQuery 添加到 ngAfterViewInit。它适用于一条路线，但如果我导航到另一条路线（例如从 id: 1 到 id: 2），它不适用于第二条路线（我对两者使用相同的组件） .

它可以使用 ngAfterViewChecked 但是，该函数会被执行多次（在视图中的每次更改之后）。

这是我的 jQuery 功能：

$('.chips').on('chip.add', (e, chip) => {
  console.log(e, chip);
});

Answer 1

您的问题的一种可能解决方案如下所示：

1) 您需要导入 NgZone

import { NgZone } from '@angular/core';

2) 在你的构造函数中注入它

constructor(
    ...
    private ngZone: NgZone 
) {}

3) 添加一些代码，在您的 goTo 方法中发挥一些魔力

goTo(id) {
  this.router.navigate(['/detail', id]);
  if(id === 3) { 
    this.ngZone.onMicrotaskEmpty.first().subscribe(this.ngAfterViewInit);
  }
}

这样当你转到第 3 页时 ngAfterViewInit 方法将在更改检测后执行

4) 不要忘记导入 first 运算符：

import 'rxjs/add/operator/first';

Loading jQuery functions in Angular 2