Angular4:jQuery和angular2-materialize在路由导航后不工作
问题描述:
已经创建了一个带有角度cli的角度4项目。在angular-cli.json文件中导入css和js。Angular4:jQuery和angular2-materialize在路由导航后不工作
"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 进口{MaterializeModule}从 'angular2-Materialise的';
当我们第一次登陆页面或刷新页面时,滑块会按预期工作。
问题:当我们使用路由器链接进行导航时,页面正确导航但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();
}
}
` 错误: 收到错误: 错误类型错误:a.addEventListener不是一个函数
at http://localhost:4200/vendor.bundle.js:15611:765
at Array.forEach (native)
答
解决了很多迭代后。 解决方案: 如果您正在导入angular-cli.json中的js,那么无需再次在组件中导入相同的js。导致重复,你会得到奇怪的JavaScript异常,这会误导。 只需声明它们并像下面的代码一样使用它。
另外在Onngint(){}方法中再次调用javascript函数。这个函数将被使用的每个组件都要被调用。 示例如下:
ngOnInit() {
$(function(){
$('.button-collapse').sideNav();
}); // end of document ready
}
请记得检查文档是否准备就绪。不检查导致脚本的早期执行。
你能否提供更多细节,萌芽?我试着做'Materialize('。button-dropdown')',但我得到了“Materialize不是函数”的错误。我尝试过'$('。button-dropdown')。dropdown(); ',但我仍然看到同样的问题 - 下拉菜单在两页(随机)上工作,但在第三页上不起作用。 这确实帮助我解决了我在'ngAfterViewChecked'中用'Materialize.updateTextFields()'得到的错误。我在新的页面加载时出错;把它包装在一个准备好的文件中。 – Will
这个答案真的很有帮助。我的问题现在解决了。谢谢很多.......... –