Angular4: jQuery и angular2-материализовать не работает после навигации по маршруту

создали проект angular 4 с angular-cli. импортированные css и js в 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 имеет ниже функции

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

импортированный MaterializeModule в приложении.модуль.ts импорт { MaterializeModule } из 'angular2-материализовать';

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

проблема: когда мы перемещаемся с помощью router-link, страница перемещается правильно, но javascript функции не вызываются.

маршрутизация с главной страницы <a routerLink="/blog/abc-1">Blog</a>

Я старался: блог.деталь.ТС

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

}

` Ошибка: получаю ошибку : Ошибка TypeError: a.addEventListener не является функцией

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

1 ответов


решил его после большого количества итераций. Решение: Если вы импортируете js в angular-cli.JSON тогда не нужно импортировать то же самое снова в компоненты. Приводит к дублированию и вы получите странные исключения JavaScript, которые будут вводить в заблуждение. Просто объявите их и используйте его, как код ниже.

declare let $ : any;

дополнительно в методе Onngint () {} вызовите функцию javascript еще раз. Это должно быть вызвано в каждом компоненте, который будет использоваться этой функцией. образец ниже:

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

Не забудьте проверить документ готов. Не проверка привела к раннему выполнению скриптов.