javascript - *ngIf条件设置为true后如何检测DOM何时准备好

我有一个 Angular 2 (Ionic 2) 应用程序，如果网络离线，我会使用 *ngIf 隐藏一些元素，并显示另一个按钮“重试”。

当我单击重试按钮时，如果网络恢复了，我想重新显示被 *ngIf 隐藏的元素。此外，我还需要通过 @ViewChild 引用其中的一些(例如，Ionic 2 滑块以获取其当前索引)。我的问题是，当我尝试在将绑定(bind)到 *ngIf 的属性设置回 true 的同一函数调用中获取对它们的引用时，这些元素并未全部定义。

我曾尝试从 setTimeout 中调用，但这似乎不是很安全 - 一些 DOM 元素又回来了，但不是全部。

有没有办法知道 DOM 已经准备好所有被 *ngIf 隐藏的元素，或者我是否需要找到其他一些方法来做到这一点(不使用 *ngIf ，所以元素实际上没有被删除)。

在此先感谢您的任何建议!

最佳答案

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

在组件模板中:

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

在您的组件类中

@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
   });
}

这是一个显示它工作的 plunk:https://plnkr.co/edit/jKSaEI0XUcJQehZnJTxB

关于javascript - *ngIf条件设置为true后如何检测DOM何时准备好，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43210050/