Question

我似乎无法找到一个钩子，通过它我可以知道由其他子组件组成的组件已完全加载，包括数据绑定和所有内容。例如，为<div class="col-lg-12" style="background: red none repeat scroll 0% 0%; position: absolute; left: 0px; top: 0px; height: 100%; z-index: -1; right: 0px; margin: 0px auto;"> </div>采用以下模板：

ParentComponent

任何建议都受到高度赞赏。

Answer 1

这是错的！初始化视图时会触发ngAfterViewInit ... 给它一个断点，你会看到。 Angular 2确实缺少一个知道何时视图实际上已满载的钩子！但作为一种解决方法，你可以尝试类似的东西：

ngAfterViewInit() {
    console.log('View is being initialized');
    console.log(this.el.nativeElement.offsetHeight);

    setTimeout(() => {
        console.log('View is fully loaded');
        console.log(this.el.nativeElement.offsetHeight);
    }, 0);
}

Answer 2

调用ngAfterViewInit() {}或传递内容（<ng-content>）后，调用ngAfterContentInit()后。

Answer 3

基于Dimitri的答案，我发现即使在调用ngAfterViewInit之后，某些元素仍然没有完全加载，就我而言，我是在元素的scrollHeight之后。

使用Ionic的rol = stock.rolling(50, min_periods=1).mean() profitMade = ((stock.shift(-3)-stock)/stock).dropna() rol = rol.loc[profitMade.index] stock = stock.loc[profitMade.index] profitMade[(stock['value'] < stock['value'].shift(-1)) & (stock['value'] > rol['value'])] Out: value Date 2002-06-05 0.008095并进行了一些超时测试，我发现内容在大约60毫秒后终于被实例化，因此我将其增加到250毫秒，只是提供了一些摆动空间。确实不是很理想，但这是执行检查的最后一个生命周期钩子……但是也许会对某人有所帮助？

platform.ready()

我知道并不是每个人都会使用Ionic来提供constructor(public platform: Platform) {} ngAfterViewInit() { this.platform.ready().then(() => { /* still returns 0 here */ console.log(this.el.nativeElement.scrollHeight); setTimeout(() => { /* returns x here */ console.log(this.el.nativeElement.scrollHeight); }, 250); }); }类，这仅与我的用例有关，因为我正在使用离子图标。但是我把它留了下来，以防它帮助另一个离子用户或其他东西...

当Angular 2组件已满载时

3 个答案: