如何在每个组件加载完成后在Angular 2中运行jquery函数
我已经尝试了所有的生命周期钩子，但无法实现所需的结果。我需要的结果是，在加载每个元素(组件)之后，触发一个函数来初始化单个页面上用于不同元素的许多jquery插件。
假设你有这样的结构。
主页滑块小部件产品旋转器..etc
这些元素中的每一个都有自己的组件，并且都是主页父组件的子组件。
这里我需要知道所有的子组件和父组件什么时候加载，所以我触发了一个jquery函数来初始化页面上的每个插件。
回答 5
Stack Overflow用户
发布于 2016-09-09 05:10:35
您将希望通过导入AfterViewInit (https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#afterview)来使用"ngAfterViewInit“生命周期挂钩。您可以使用它，如下所示：
安装：
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
Stack Overflow用户
发布于 2016-04-06 21:52:33
我发现的最有效的方法是在页面/组件构造函数中使用时间为0的setTimeout。这让jQuery在Angular加载完所有子组件后的下一个执行周期中运行。
export class HomePage {
constructor() {
setTimeout(() => {
// run jQuery stuff here
}, 0);
}
}将setTimeout放在ngOnInit方法中对我也很有效。
export class HomePage {
ngOnInit() {
setTimeout(() => {
// run jQuery stuff here
}, 0);
}
}Stack Overflow用户
发布于 2016-03-02 00:55:19
关于
bootstrap(...).then(x => {
...
})否则，我会假设根组件的ngAfterViewInit()是一个符合您需求的生命周期钩子，但是您说您已经测试了所有……
更新
根组件上的bootstrap()或ngAfterViewInit()只能用于初始加载。对于以后添加的组件，可以使用添加的组件的ngAfterViewInit()。
https://stackoverflow.com/questions/35728731
复制相似问题
腾讯云开发者
