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

Question

我有一个Angular 2（Ionic 2）应用程序，如果网络处于脱机状态，我会使用*ngIf隐藏一些元素，并显示另一个按钮，＆＃34;重试＆＃34;。

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

我试过在setTimeout中调用但是这似乎不是很安全 - 一些DOM元素又回来但不是全部。

有没有办法知道DOM已经准备好了*ngIf隐藏的所有元素，或者我是否需要找到其他方法（不使用*ngIf ，所以元素实际上没有删除。）

提前感谢任何建议！

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

这是一个显示正常工作的插件：https://plnkr.co/edit/jKSaEI0XUcJQehZnJTxB

Answer 2

我认为您希望了解this，

我认为ngAfterViewInit()会对此有所帮助，

  

ngAfterViewInit（）在Angular初始化组件后做出响应   观点和儿童观点。

     

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

     

仅限组件的挂钩。