Cách chạy hàm jquery trong Angular 2 sau mỗi lần tải thành phần

Question

Tôi đã thử tất cả các móc vòng đời nhưng không thể đạt được kết quả cần thiết. Kết quả mà tôi cần là kích hoạt một hàm khởi tạo nhiều plugin jquery được sử dụng cho các phần tử khác nhau trên một trang sau mỗi lần tải các thành phần (thành phần) đơn lẻ.

Vì vậy, giả sử bạn có cấu trúc này.

Home Page Slider Widgets rotators sản phẩm ..etc

Mỗi một trong những yếu tố này có đó là thành phần riêng và tất cả đều là con cái của các thành phần cha mẹ Trang chủ.

Và những gì tôi cần ở đây là biết khi nào tất cả các thành phần con và thành phần gốc được tải để tôi kích hoạt một hàm jquery để khởi tạo mọi plugin trên trang.

Answer 1

gì về

bootstrap(...).then(x => { 
    ... 
}) 

nếu không tôi sẽ giả định ngAfterViewInit() của thành phần gốc của bạn là một cái móc vòng đời phù hợp với yêu cầu của bạn, nhưng bạn nói rằng bạn đã kiểm tra tất cả đã ...

cập nhật

bootstrap() hoặc ngAfterViewInit() trên thành phần gốc chỉ có thể được sử dụng cho tải ban đầu. Đối với các thành phần được thêm sau, ngAfterViewInit() của các thành phần được thêm vào có thể được sử dụng.

Answer 2

Cách hiệu quả nhất mà tôi đã tìm thấy là sử dụng setTimeout với thời gian là 0 bên trong của hàm tạo trang/thành phần. Điều này cho phép jQuery chạy trong chu kỳ thực hiện tiếp theo sau khi Angular đã hoàn thành tải tất cả các thành phần con.

export class HomePage { 
    constructor() { 
     setTimeout(() => { 
      // run jQuery stuff here 
     }, 0); 
    } 
} 

Đặt phương thức setTimeout bên trong của phương thức ngOnInit cũng đã hoạt động đối với tôi.

Answer 3

Bạn sẽ muốn sử dụng móc vòng đời "ngAfterViewInit", thông qua nhập AfterViewInit (https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#afterview). Bạn có thể sử dụng nó như hình dưới đây:

Cài đặt:

tsd install jquery --save 

hoặc

typings install dt~jquery --global --save 

Sử dụng:

import { Component, AfterViewInit } from '@angular/core'; 
    import * as $ from 'jquery'; 

    ngAfterViewInit() { 
     this.doJqueryLoad();  
     this.doClassicLoad(); 

     $(this.el.nativeElement) 
      .chosen() 
      .on('change', (e, args) => { 
       this.selectedValue = args.selected; 
      }); 
    } 

    doClassicLoad() { 
     // A $(document).ready() block. 
     $(document).ready(function() { 
      console.log("Unnecessary..."); 
     });  
    } 

    // You don't need to use document.ready... 
    doJqueryLoad() { 
     console.log("Can use jquery without doing document.ready") 
     var testDivCount = $('#testDiv').length; 
     console.log("TestDivCount: ", testDivCount); 
    } 

Đây là một plunker cho một ví dụ: http://plnkr.co/edit/KweZYO9hk9Dz8pqDK77F?p=info

Answer 4

Tôi đã có cùng một vấn đề ở đây. Tôi đã tìm thấy 2 giải pháp, thậm chí chúng không phải là giải pháp tốt nhất:

1 - Triển khai afterViewChecked để kiểm tra xem plugin jquery có được khởi chạy hay không và sau đó sử dụng biến để kiểm soát khởi tạo. Đây là cách khó bởi vì afterViewChecked được gọi nhiều lần.

2 - Tôi đã thay đổi một số thành phần bị ẩn bằng thuộc tính ẩn thay vì ngIf. Với ẩn tôi có thể khởi tạo tất cả các plugin jquery bằng cách sử dụng afterViewInit và làm cho chúng hoạt động ngay cả đối tượng của tôi bị ẩn.

setTimeout không hoạt động khi sử dụng ngIf. Nó kích hoạt trước khi nội dung được hiển thị lại.

Answer 5

Một giải pháp khả thi sẽ được đăng ký trên zone.onStable hoặc zone.onMicrotaskEmpty

ngAfterViewInit() { 
    this.zone.onStable.first().subscribe(() => { 
    debugger; 
    }); 
} 

hoặc

ngOnInit() { 
    this.service.getData().subscribe(() => { 
    this.data = data; 
    this.zone.onMicrotaskEmpty.first().subscribe((data) => { 
     $(someElem).plugin(); 
    }); 
    }); 
} 

Xem thêm

• Angular 2 calling jQuery after rendering elements - after consuming API