Question

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

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

主页滑块小工具产品旋转器 ..等

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

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

Answer 1

你会想要使用＆＃34; ngAfterViewInit＆＃34;生命周期钩子，通过导入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);
    }

这是一个例子的plunker： 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()。

Answer 4

我在这里遇到了同样的问题。我找到了2个解决方案，即使它们不是最好的：

1 - 实现afterViewChecked以检查是否启动了jquery插件，然后使用变量来控制其初始化。这很难，因为多次调用afterViewChecked。

2 - 我使用隐藏属性而不是ngIf更改了一些要隐藏的元素。使用隐藏，我可以使用afterViewInit初始化所有jquery插件，并使它们工作，甚至隐藏我的对象。

使用ngIf时，

setTimeout不起作用。它在重新呈现内容之前触发。

Answer 5

一种可能的解决方案是订阅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 calling jQuery after rendering elements - after consuming API

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

5 个答案: