Angular 是一种流行的前端开发框架，它提供了一系列的生命周期钩子函数来帮助我们管理组件的生命周期。其中之一就是 AfterViewInit。在本文中，我们将学习如何使用 AfterViewInit 钩子函数，并通过一个案例来加深理解。

typescript
import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
@Component({
  selector: 'app-example',
  template: `
    
Example Component
  `
})
export class ExampleComponent implements AfterViewInit {
  @ViewChild('titleElement') titleElement!: ElementRef;
  ngAfterViewInit() {
    console.log(this.titleElement.nativeElement.textContent);
  }
}

typescript
import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
@Component({
  selector: 'app-image-resizer',
  template: `
    
      
    
  `
})
export class ImageResizerComponent implements AfterViewInit {
  @ViewChild('container') container!: ElementRef;
  @ViewChild('imageElement') imageElement!: ElementRef;
  imageUrl = 'example.jpg';
  ngAfterViewInit() {
    this.resizeImage();
  }
  resizeImage() {
    const containerWidth = this.container.nativeElement.offsetWidth;
    const imageWidth = this.imageElement.nativeElement.offsetWidth;
    if (imageWidth > containerWidth) {
      this.imageElement.nativeElement.style.width = '100%';
    }
  }
}