Angular 学习日记 - 8 - 生命周期（2）

最新推荐文章于 2025-05-01 16:54:33 发布

洛阳乂青楼满座

最新推荐文章于 2025-05-01 16:54:33 发布

阅读量422

点赞数 10

文章标签： angular.js 学习前端

本文链接：https://blog.csdn.net/weixin_44548184/article/details/135244926

版权

文章详细解释了Angular中的ViewChild和ContentChild指令在组件生命周期中的行为，尤其是在afterViewInit和afterContentInit阶段的渲染。通过实例展示了如何在父组件中使用这两个指令获取子组件的元素。

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

关于ViewChild的扩展

被@ViewChild 修饰的属性直到 afterViewInit()时才会渲染出来。

<!-- <div class="panel panel-primary"> -->
  <div class="panel-heading" #heading>{{ element.name }}</div>
<!--  <div class="panel-body">
    <p>
      <strong *ngIf="element.no % 2 === 0" style="color: red">{{
        element.content
      }}</strong>
      <em *ngIf="element.no % 2 === 1" style="background-color: red">{{
        element.content
      }}</em>
    </p>
  </div>
</div>
-->

export class ServerComponent {
  @ViewChild('heading', { static: true }) header: ElementRef;
  
  ngOnInit(): void {
    console.log('OnInit Called');
    console.warn('heading :', this.header.nativeElement.textContent);
  }

  ngAfterViewInit() {
    console.log('AfterViewInit Called');
    console.warn('heading :', this.header.nativeElement.textContent);
  }
}

关于ContentChild的扩展

被@ContentChild 修饰的属性直到 afterContentInit()时才会渲染出来。

子组件代码

<div class="panel panel-primary">
  <div class="panel-heading" #heading>{{ element.name }}</div>
  <div class="panel-body">
    <ng-content></ng-content>
  </div>
</div>

export class ServerComponent {
  @ViewChild('heading', { static: true }) header: ElementRef;
  @ContentChild('paragraphContent', { static: true }) paragraph: ElementRef;

  ngOnInit(): void {
    console.log('OnInit Called');
    console.warn('heading :', this.header.nativeElement.textContent);
    console.warn('paragraph :', this.paragraph.nativeElement.textContent);
  }

  ngAfterContentInit() {
    console.log('AfterContentInit Called');
    console.warn('paragraph :', this.paragraph.nativeElement.textContent);
  }

  ngAfterViewInit() {
    console.log('AfterViewInit Called');
    console.warn('heading :', this.header.nativeElement.textContent);
  }
}

父组件代码

<!-- <div *ngFor="let server of servers"> 
    <app-server [element]="server" [name]="server.name"> -->
      <p #paragraphContent>
<!--    <strong *ngIf="server.no % 2 === 0" style="color: red">{{
          server.content
        }}</strong>
        <em *ngIf="server.no % 2 === 1" style="background-color: red">{{
          server.content
        }}</em>
      </p>
    </app-server>
  </div> -->