angular2+如何在组件视图渲染完成后操作Dom?

Question

angular2+如何在组件渲染完成后操作Dom?这个组件的数据是由父组件异步请求得到的，我要在该组件数据渲染完成后获取它的宽度，直接获取是不行的，不要用setTimeout，这个方法太强行了。求大佬们解答解答，谢谢

Answer 1

你可能需要了解了组件生命周期

个人感觉有几种方案：

第一种直接利用ngAfterViewChecked()，每当 Angular 做完组件视图和子视图或包含该指令的视图的变更检测之后调用。父组件的异步数据返回后会重新渲染子组件，而该方法则会有渲染后调用。该方法还可以结合rxjs的防抖，避免一些不必要的重复运算。

第二种写法上麻烦一些，适用于子组件初始化后便不会变更的情况：

<app-child *ngIf="异步数据" [input]="异步数据"></app-child>

如果异步数据是对象，则可以初始化为null，此时当异步数据返回后才后构建子组件。所以可以在子组件中利用ngAfterViewInit(),该方法由于只会在渲染完毕后调用一次，所以效率会提升。适用于input的值输入后则不变更的情况。

除此以外，或许还可以在组件中结合使用componentRef.detectChange()方法， @ViewChild()方法。

Answer 2

angular 中我一般用Promise.resolve().then(fn) , 获取渲染后的dom