Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.8k views
in Technique[技术] by (71.8m points)

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

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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

个人感觉有几种方案:

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

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

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

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

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

2.1m questions

2.1m answers

60 comments

57.0k users

...