Angular4: jQuery và angular2-materialize không hoạt động sau khi điều hướng tuyến đường

Question

Đã tạo ra một dự án góc 4 với angular-cli. nhập css và js trong tệp angular-cli.json.

"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 có bên dưới chức năng

(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); 

MaterializeModule nhập khẩu app.module.ts nhập {} MaterializeModule từ 'angular2-materialize';

Công trình trượt như mong đợi khi chúng tôi truy cập trang lần đầu tiên hoặc khi chúng tôi làm mới.

Sự cố: khi chúng tôi điều hướng bằng liên kết bộ định tuyến thì trang điều hướng chính xác nhưng chức năng javascript không được gọi.

định tuyến từ trang chủ <a routerLink="/blog/abc-1">Blog</a>

tôi đã cố gắng: `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(); 
    } 

} 

' Lỗi: nhận được lỗi: ERROR Lỗi Loại: a.addEventListener không phải là một chức năng

at http://localhost:4200/vendor.bundle.js:15611:765 
at Array.forEach (native) 

Answer 1

Giải quyết sau nhiều lần lặp lại. Giải pháp: Nếu bạn nhập js trong angular-cli.json thì không cần phải nhập lại một lần nữa trong các thành phần. Kết quả trùng lặp và bạn sẽ nhận được ngoại lệ javascript lạ mà sẽ gây hiểu nhầm. Chỉ cần khai báo và sử dụng nó như mã bên dưới.

bổ sung trong phương thức Onngint() {} gọi hàm javascript một lần nữa. Điều này phải được gọi trong mỗi thành phần và chức năng này sẽ được sử dụng. ví dụ bên dưới:

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

Hãy nhớ kiểm tra tài liệu sẵn sàng. Không kiểm tra dẫn đến việc thực thi kịch bản sớm.