Angular ngAfterViewInit 메서드

ngAfterViewInit() 메소드를 소개하고 Angular 애플리케이션에서 사용할 것입니다.

Angular의 ngAfterViewInit() 메서드

Angular의 ngAfterViewInit()은 AfterViewInit의 메소드이며 Angular는 컴포넌트의 뷰 이후에 호출되는 라이프사이클 후크를 완전히 초기화합니다.

ngAfterViewInit()를 사용하여 구성 요소에 필요한 초기화 작업을 처리하고 수행하거나 구성 요소의 보기가 완전히 초기화된 후에 수행할 수 있습니다.

@ViewChild() 및 @ViewChildren() 데코레이터의 두 데코레이터와 함께 ngAfterViewInit()을 사용하여 주석이 달린 속성에 액세스할 수 있습니다.

ngAfterViewInit()이 작동하는 방식과 Angular 애플리케이션에서 이를 사용할 수 있는 방법을 이해하기 위해 예제를 살펴보겠습니다.

다음 명령을 사용하여 새 응용 프로그램을 만들어 보겠습니다.

# angular
ng new my-app

Angular에서 새 애플리케이션을 만든 후 이 명령을 사용하여 애플리케이션 디렉토리로 이동합니다.

# angular
cd my-app

이제 앱을 실행하여 모든 종속 항목이 올바르게 설치되었는지 확인하겠습니다.

# angular
ng serve --open

app.component.ts에서 console.log 메시지에 ngAfterViewInit() 메서드를 생성합니다. 따라서 우리의 코드는 아래와 같을 것입니다.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  ngAfterViewInit() {
    console.log("Sent from Ng After View Init");
  }
}

출력:

이런 식으로 우리는 ngAfterViewInit()를 사용하여 Angular에 의해 구성 요소의 뷰가 초기화된 후 중요한 것을 초기화할 수 있습니다.