Angular4: jQuery i kanciasty 2-materialize nie działają po nawigacji po trasie

Question

Utworzono 4 kątowy projekt z kanciastym-cli. zaimportowane css i js w pliku angular-cli.json.

"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 ma poniżej funkcji

(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); 

importowane MaterializeModule w app.module.ts importu {MaterializeModule} i 'angular2-materializować;

Suwak działa zgodnie z oczekiwaniami, gdy wyświetlamy stronę po raz pierwszy lub kiedy odświeżamy.

Problem: gdy nawigujemy za pomocą routera, strona porusza się prawidłowo, ale funkcje javascript nie są wywoływane.

routingu ze strony domowej <a routerLink="/blog/abc-1">Blog</a>

Próbowałem: `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(); 
    } 

} 

` Błąd: coraz błąd: ERROR Błąd typu: a.addEventListener nie jest funkcją

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

Answer 1

Rozwiązał to po wielu iteracjach. Rozwiązanie: Jeśli importujesz js w kanale-cli.json, nie ma potrzeby importowania tego samego ponownie w komponentach. Wyniki w duplikacji i otrzymasz dziwne wyjątki javascript, które wprowadzą w błąd. Po prostu je zadeklaruj i użyj jak kodu poniżej.

dodatkowo w Onngint() Metoda {} wywołuje funkcję javascript jeszcze raz. To musi być wywołane w każdym komponencie, którego funkcja będzie używana. przykład poniżej:

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

Pamiętaj, aby sprawdzić gotowy dokument. Brak sprawdzenia spowodował wczesne wykonanie skryptów.