Загрузка функций jQuery в Angular 2

Question

Каков правильный способ загрузки jQuery-функций в Angular 2?

Я добавил свой jQuery к ngAfterViewInit. Он отлично работает для одного маршрута, но если я перехожу к другому (например, от id: 1 до id: 2), он не работает для второго (я использую тот же компонент для обоих).

Он работает с использованием ngAfterViewChecked, но тогда функция выполняется несколько раз (после каждого изменения вида).

Это моя функция JQuery:

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

Plunker

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

Вот Plunker Example