[Angular] Difference between ngAfterViewInit and ngAfterContentInit-CSDN博客

本文详细解析了Angular中的视图初始化与内容初始化的区别，通过具体代码示例展示了ngAfterViewInit与ngAfterContentInit方法的调用时机及其应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Content is what is passed as children. View is the template of the current component.

The view is initialized before the content and ngAfterViewInit() is therefore called before ngAfterContentInit().

@Component({
  selector: 'parent-cmp',
  template: '<div #wrapper><ng-content></ng-content></div>'
})
class ParentComponent {
  @ViewChild('wrapper') wrapper:ElementRef;
  @ContentChild('myContent') content:ElementRef;

  ngAfterViewInit() {
    console.log('ngAfterViewInit - wrapper', this.wrapper);
    console.log('ngAfterViewInit - content', this.content);
  }

  ngAfterContentInit() {
    console.log('ngAfterContentInit - wrapper', this.wrapper);
    console.log('ngAfterContentInit - content', this.content);
  }
}

<parent-cmp><div #myContent>foo</div></parent-cmp>

If you run this code, the output for ngAfterViewInit - content should be null.

So if you want to change the child component's props, you cannot do it in 'ngAfterViewInit', you need to do it in 'ngAfterContentInit'.

转载于:https://www.cnblogs.com/Answer1215/p/6417872.html