如何在每个组件完成加载后在Angular 2中运行jquery函数
我已经尝试了所有生命周期钩子但无法完成所需的结果。 我需要的结果是在加载这些元素（组件）中的每一个之后触发一个函数，该函数初始化用于单个页面上的不同元素的许多jquery插件。
所以我们说你有这种结构。
主页滑块小部件产品旋转器..等等
这些元素中的每一个都有自己的组件，并且都是主页父组件的子组件。
我需要的是知道所有子组件和父组件何时被加载，所以我触发一个jquery函数来初始化页面上的每个插件。
您将需要使用“ngAfterViewInit”生命周期钩子，通过导入AfterViewInit（ https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#afterview ）。 你可以使用它，如下所示：
安装：
tsd install jquery --save 要么
typings install dt~jquery --global --save
利用：
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); }
以下是一个例子的插图： http ：//plnkr.co/edit/KweZYO9hk9Dz8pqDK77F？p = info
我找到的最有效的方法是在页面/组件构造函数中使用时间为0的setTimeout。 这让我们在Angular完成加载所有子组件之后的下一个执行周期中运行jQuery。
export class HomePage { constructor() { setTimeout(() => { // run jQuery stuff here }, 0); } }
将setTimeout放在ngOnInit方法中也对我有用。
export class HomePage { ngOnInit() { setTimeout(() => { // run jQuery stuff here }, 0); } }
关于什么
bootstrap(...).then(x => { ... })
否则我会假设你的根组件的ngAfterViewInit()是一个符合你要求的生命周期钩子，但你说你已经测试了所有…
更新
根组件上的bootstrap()或ngAfterViewInit()只能用于初始加载。 对于以后添加的组件，可以使用添加组件的ngAfterViewInit() 。
我在这里遇到了同样的问题。 我找到了2个解决方案，即使它们不是最好的：
1 – 实现afterViewChecked以检查是否启动了jquery插件，然后使用变量来控制其初始化。 这是很难的方法因为多次调用afterViewChecked。
2 – 我使用隐藏属性而不是ngIf更改了一些要隐藏的元素。 使用隐藏，我可以使用afterViewInit初始化所有jquery插件，并使它们工作，甚至隐藏我的对象。
使用ngIf时，setTimeout不起作用。 它在重新呈现内容之前触发。
一种可能的解决方案是订阅zone.onStable或zone.onMicrotaskEmpty
ngAfterViewInit() { this.zone.onStable.first().subscribe(() => { debugger; }); }
要么
ngOnInit() { this.service.getData().subscribe(() => { this.data = data; this.zone.onMicrotaskEmpty.first().subscribe((data) => { $(someElem).plugin(); }); }); }
也可以看看
- Angular 2在渲染元素后调用jQuery – 在使用API之后