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)

来源

2017-07-03 Squapl Recipes

解决了很多迭代后。解决方案：如果您正在导入angular-cli.json中的js，那么无需再次在组件中导入相同的js。导致重复，你会得到奇怪的JavaScript异常，这会误导。只需声明它们并像下面的代码一样使用它。

另外在Onngint（）{}方法中再次调用javascript函数。这个函数将被使用的每个组件都要被调用。示例如下：

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

请记得检查文档是否准备就绪。不检查导致脚本的早期执行。

来源

2017-07-06 06:03:23

你能否提供更多细节，萌芽？我试着做'Materialize（'。button-dropdown'）'，但我得到了“Materialize不是函数”的错误。我尝试过'$（'。button-dropdown'）。dropdown（）; '，但我仍然看到同样的问题 - 下拉菜单在两页（随机）上工作，但在第三页上不起作用。这确实帮助我解决了我在'ngAfterViewChecked'中用'Materialize.updateTextFields（）'得到的错误。我在新的页面加载时出错;把它包装在一个准备好的文件中。 – Will

这个答案真的很有帮助。我的问题现在解决了。谢谢很多.......... –

Angular4：jQuery和angular2-materialize在路由导航后不工作

回答

相关问题