javascript - 在Angular 2中加载jQuery函数

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

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

它可以使用ngAfterViewChecked起作用，但是该函数将执行多次(在 View 中的每次更改之后)。

这是我的jQuery函数:

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

Plunker

最佳答案

您的问题的一种可能的解决方案可能是这样的:

1)您需要导入NgZone

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

2)将其注入(inject)您的构造函数中

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';

这是 Plunker Example