如何等到ng2完成更改DOM

Question

我的網絡應用程序中有打印功能。 我使用jquery打印插件在打印預覽中只顯示dom中的幾個元素。 我想確保只有在渲染完所有數據后才開始打印。 在當前的實現中 - 有時打印預覽顯示並不是dom中的所有信息（我認為ng2使用某種延遲操作）。

看看樣本：

@Component(...)
export class MyCoolComponent{|

myModel:MyModel;


print(){
   _myService.fetchDataSomehow().subscribe((newData:MyModel)=>{
       this.myModel = newData;
       // I need to wait until ng2 will adjust dom with new data in synchronous manner
       $(this._el).print();
   })
}
}

模板：

<div>
  {{myModel.field1}}
  {{myModel.field2}}
  {{myModel.field3}}
  //...and a lot of other fields from myModel
</div>

我知道我可以使用setTimeout(()=>{...}, 1) ，但它看起來很傻。 是否有更堅實的方法等待角度2調整dom由於模型的變化？

Answer 1

checkout ngAfterViewChecked in docs ，也許這就是你要找的東西。

Answer 2

另一種方法是將*ngIf添加到您的html中。

如果你想在myModel有值之前不渲染任何內容，請執行類似的操作。

<div *ngIf="myModel">
  {{myModel.field1}}
  {{myModel.field2}}
  {{myModel.field3}}
</div>

這將檢查myModel是否有任何值。 如果是，那么它將呈現。

您還可以通過檢查myModel是否沒有值並正確處理來添加“加載文本”

<div *ngIf="!myModel">
     Fetching Data...
</div>