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在路由導航後不工作

回答

相關問題