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