Angular4：経路ナビゲーション後にjQueryとangular2-materializeが機能しない

Question

angular-cliで角度4のプロジェクトを作成しました。 angular-cli.jsonファイルにcssとjsをインポートしました。

"styles": [ 
    "../node_modules/materialize-css/dist/css/materialize.css", 
    "styles.css" 
], 
"scripts": [ 
    "../node_modules/jquery/dist/jquery.js", 
    "../node_modules/hammerjs/hammer.js", 
    "../node_modules/materialize-css/dist/js/materialize.js", 
    "../src/assets/js/init.js" 
], 

init.jsは、関数の下有する

(function($) { 
    $(function() { 
     $('.slider').slider(); 
     $('.button-collapse').sideNav(); 
     $('.carousel').carousel(); 
     // $('.carousel.carousel-slider').carousel({fullWidth: true}); 
     $('.carousel').carousel({ 
      dist: 0, 
      shift: 0, 
      padding: 20, 
     }); 

    }); // end of document ready 
})(jQuery); 

app.module.tsにインポートMaterializeModule インポート 'angular2-マテリア' から{MaterializeModule}。

スライダーは、初めてページを表示したり、更新したりするときに正常に動作します。

問題：router-linkを使用してナビゲートすると、ページが正しくナビゲートされますが、javascript関数は呼び出されません。

ホームページからルーティング<a routerLink="/blog/abc-1">Blog</a>

私が試した： `blog.component.ts

import { Component, OnInit } from '@angular/core'; 
import { MaterializeModule } from 'angular2-materialize'; 

import * as $ from 'jquery'; 

import * as Materialize from 'materialize-css'; 


declare let Materialize : any; 

@Component({ 
    selector: 'app-blog', 
    templateUrl: './blog.component.html', 
    styleUrls: ['./blog.component.css'] 
}) 
export class BlogComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    Materialize('.slider').slider(); 
    } 

} 

` がエラー： 取得中にエラー： ERRORの例外TypeError：a.addEventListenerが機能

ではありません

at http://localhost:4200/vendor.bundle.js:15611:765 
at Array.forEach (native) 

Answer 1

多くの繰り返しの後にそれを解決しました。 解決策： angular-cli.jsonでjsをインポートする場合、コンポーネントで同じものを再度インポートする必要はありません。結果が重複すると、間違ったjavascript例外が発生し、誤解を招きます。 それらを宣言し、以下のコードのように使用してください。

さらに、Onngint（）{}メソッドでは、もう一度javascript関数を呼び出します。これは、すべてのコンポーネントで呼び出される必要があります。この関数が使用されます。 例：

ngOnInit() { 
     $(function(){ 
      $('.button-collapse').sideNav(); 
     }); // end of document ready 
    } 

ドキュメントの準備ができていることを確認してください。チェックを行わないとスクリプトの早期実行ができませんでした。