如何在每个组件完成加载后在Angular 2中运行jquery函数

Question

我已经尝试了所有生命周期钩子但无法完成所需的结果.我需要的结果是在加载这些元素(组件)中的每一个之后触发一个函数,该函数初始化用于单个页面上的不同元素的许多jquery插件.

所以我们说你有这种结构.

主页滑块小部件产品旋转器..等等

这些元素中的每一个都有自己的组件,并且都是主页父组件的子组件.

我需要的是知道所有子组件和父组件何时被加载,所以我触发一个jquery函数来初始化页面上的每个插件.

Answer 1

您将需要使用"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

Answer 2

我找到的最有效的方法是在页面/组件构造函数中使用时间为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);
    }
}

Answer 3

关于什么

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

否则我会假设ngAfterViewInit()你的根组件是一个符合你的要求的生命周期钩子，但你说你已经测试了所有......

更新

bootstrap()或者ngAfterViewInit()在根组件上只能用于初始加载。对于后来添加的组件，ngAfterViewInit()可以使用添加的组件的。