如何在*ngIf条件为true之后检测DOM是否已经准备就绪

Question

我有一个Angular 2 (Ionic 2)应用程序，如果网络不在线，我会使用* ngIf 隐藏一些元素，并显示另一个名为“重试”的按钮。当我单击重试按钮时，如果网络恢复，则需要重新显示由* ngIf 隐藏的元素。此外，我需要通过@ViewChild引用其中一些元素（例如Ionic 2滑块以获取其当前索引）。我的问题是，在同一函数调用中将绑定到* ngIf 的属性设置为true时，这些元素并没有全部定义好，因此无法引用它们。

我尝试在setTimeout中调用，但这似乎并不安全-某些DOM元素已经回来了，但并非全部。

是否有一种方法可以知道DOM何时准备好了所有被* ngIf 隐藏的元素，或者我需要找到其他方法来完成这个过程（不使用* ngIf ，因此实际上并未删除元素）。

感谢您提前的任何建议！

- peterc

Answer 1

通过查看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

- mcgraphix

---

谢谢您的建议，看起来在这个例子中确实有效。我将其添加到我的项目中，它确实触发了，但是当我尝试在此事件中访问其中一个ion-select时，它仍然不可用。因此，在这种情况下，我已经转而切换可见性，因为这不会从dom中删除任何内容。 - peterc

Answer 2

我认为你想要理解this。

我认为ngAfterViewInit()可以帮助你解决这个问题，

ngAfterViewInit()会在Angular初始化组件的视图和子视图后响应。

在第一个ngAfterContentChecked()之后调用一次。

这是一个仅适用于组件的钩子。

- wuno