用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-materialize’导入{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();
}
}
`
错误：
得到错误：
错误TypeError：a.addEventListener不是函数
at http://localhost:4200/vendor.bundle.js:15611:765 at Array.forEach (native)
经过大量迭代后解决了这个问题.
解：
如果要在angular-cli.json中导入js,则无需再在组件中导入相同的内容.重复的结果,你会得到奇怪的javascript异常,这将导致误导.
只需声明它们并像下面的代码一样使用它.
原文链接：https://www.f2er.com/angularjs/240459.html解：
如果要在angular-cli.json中导入js,则无需再在组件中导入相同的内容.重复的结果,你会得到奇怪的javascript异常,这将导致误导.
只需声明它们并像下面的代码一样使用它.
declare let $: any;
另外在Onngint(){}方法中再次调用javascript函数.必须在将使用此功能的每个组件中调用此方法.
示例如下：
ngOnInit() {
$(function(){
$('.button-collapse').sideNav();
}); // end of document ready
}
记得检查文件准备好了.不检查导致脚本的早期执行.
