使用ViewChild和ngAfterViewInit生命周期钩子来监控子组件的DOM。在父组件中,通过ViewChild引用子组件,并在ngAfterViewInit中使用它来等待子组件渲染。
在父组件中:
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
selector: 'parent',
template: `
`
})
export class ParentComponent implements AfterViewInit {
@ViewChild('childComponent') childComponent: ChildComponent;
ngAfterViewInit(): void {
this.childComponent.rendered$.subscribe(() => {
//执行等待的逻辑
});
}
}
在子组件中:
import { Component, Output, ElementRef, Renderer2, EventEmitter } from '@angular/core';
@Component({
selector: 'child',
template: ``
})
export class ChildComponent {
@Output() rendered$: EventEmitter = new EventEmitter();
constructor(private elementRef: ElementRef, private renderer: Renderer2) {}
ngAfterViewInit(): void {
this.renderer.addClass(this.elementRef.nativeElement, 'rendered');
this.rendered$.emit();
}
}
在子组件的ngAfterViewInit生命周期钩子中,在子DOM元素上添加一个CSS类,并触发一个rendered$ EventEmitter,以便父组件可以侦听到子组件已完成渲染。在父组件的ngAfterViewInit生命周期钩子中,通过子组件的引用来订阅rendered$,以便父组件可以实现等待子组件渲染的逻辑。
上一篇:Angular组件的模板未渲染