ルート変更時にAngular 2でjQueryを実行

Question

現在、jQueryでAngular 2を使用していますが、jQueryは別のファイルに連結されています。このファイルには、多くのスコープの外に存在する、範囲が特定の要素

にそれぞれと単に文書レディ機能のある正しいページにブラウザをリロードすると、それは本当に上の要素を見つけるためのコードは完全に罰金実行されますドキュメントは準備ができていますが、別のページからナビゲートするとコードは実行されません。

私はこのようなのindex.htmlであったスクリプトをロードする代わりに、アプリケーションコンポーネントでngAfterViewInit()を設定することにより、問題を回避しようとした作業：

export class AppComponent implements AfterViewInit{ 
    ngAfterViewInit() { 
     $(document).ready(function() { 
      $.getScript("library/js/main.min.js"); 
     }); 
    } 
} 

その上にリロードするときのコードが再びのみ実行されていますすべてのコンポーネントにこのngAfterViewInit()を追加する必要がありますか？

Answer 1

解決策はルータイベントリスナーで、ルートの変更を探してコードを実行します。ここではjQueryを使用してjsファイルをリロードしました。

import { Component, OnInit } from '@angular/core'; 
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router'; 

import 'rxjs/add/operator/filter'; 
import 'rxjs/add/operator/map'; 

declare var $:any; 

export class AppComponent implements OnInit { 
    constructor(
     private router: Router, 
     private activatedRoute: ActivatedRoute 
    ) { } 

    ngOnInit() { 
     this.router.events 
     .filter(event => event instanceof NavigationEnd) 
     .map(() => this.activatedRoute) 
     .subscribe((event) => { 
      $.getScript('library/js/main.min.js'); 
     }); 
    } 
}