Javascript 如何在*ngIf条件设置为true后检测DOM何时就绪

我有一个Angular 2（Ionic 2）应用程序，如果网络离线，我会使用

*ngIf

隐藏一些元素，并显示另一个按钮“重试”

单击重试按钮时，如果网络已恢复，则我希望重新显示由

*ngIf

隐藏的元素。此外，我还需要通过

@ViewChild

（例如，使用Ionic 2滑块获取当前索引）引用其中的一些内容。我的问题是，当我试图在将绑定到

*ngIf

的属性设置回true的同一函数调用中获取对这些元素的引用时，这些元素并没有全部定义

我尝试过在setTimeout内调用，但这似乎不是很安全-一些DOM元素返回，但不是全部

有没有办法知道DOM是否准备好了所有被

*ngIf

隐藏的元素，或者我是否需要找到其他方法来实现这一点（不使用

*ngIf

，因此元素实际上不会被删除）

---

提前感谢您的建议

我想你是想了解

我认为

ngAfterViewInit（）

会帮助您解决这个问题

ngAfterViewInit（）在Angular初始化组件的 视图和子视图

在第一个ngAfterContentChecked（）之后调用一次

只有组件的挂钩

---

通过查看通过NgZone发出的OnTable事件，您应该能够做您想做的事情：

在组件模板中：

<button (click)="showFoo = !showFoo">toggle</button>
<div *ngIf="showFoo" #foo >foo</div>

---

这里有一个例子表明它是有效的：

谢谢你的建议，在这个例子中似乎确实有效。我将它添加到我的项目中，它确实启动了，但是当我试图在这个事件中访问它时，我的一个离子选择仍然不可用。在本例中，我只切换可见性，因为这不会从dom中删除任何内容。

@ViewChild('foo') foo: ElementRef;
showFoo = false;

constructor(private zone: NgZone) {
   zone.onStable.subscribe(() => {
     console.log(this.foo);
     // this will log either undefined or an ElementRef as you toggle
   });
}