Angular4：路径导航后 jQuery 和 angular2-materialize 不起作用

Question

已经使用 angular-cli 创建了一个 angular 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-materialize' 导入 { MaterializeModule };

当我们第一次登陆页面或刷新时，滑块会按预期工作。

问题：当我们使用路由器链接导航时，页面导航正确，但没有调用 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，则无需在组件中再次导入相同的 js。导致重复，你会得到奇怪的 javascript 异常，这会误导。 只需声明它们并像下面的代码一样使用它。

declare let $ : any;

另外在 Onngint() {} 方法中再次调用 javascript 函数。这必须在将使用此函数的每个组件中调用。 下面的例子：

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

记得检查文件准备好。不检查会导致脚本提前执行。