Angular 구성 요소의 수명 주기: 메서드, 다양한 유형 및 인터페이스

소개

웹과 모바일 모두를 위한 애플리케이션 구축을 허용하는 클라이언트 측 플랫폼은 각진 형태입니다. 2009년 구글에서 도입했다. 처음에 플랫폼은 Angular TypeScript 및 기타 스크립팅 언어로 대체된 Javascript 및 HTML을 지원했습니다.

Angular의 많은 버전이 AngularJS에서 Angular-7 등으로 개발되었습니다. 버전이 무엇이든 Angular는 일반적으로 구성 요소로 구성됩니다. 따라서 구성 요소를 이해하는 것은 구성 요소의 처리를 명확하게 이해하는 데 중요합니다.

그러나 Angular의 모든 구성 요소에는 Angular 수명 주기 의 각 단계가 초기화 단계를 거쳐 소멸 단계로 넘어가는 특정 라이프스타일이 있습니다.

이 기사에서는 angular의 다양한 구성 요소의 수명 주기 이벤트에 중점을 둘 것입니다.

라이프 사이클 방법

Angular 내의 구성 요소는 수명 주기가 다르며 초기화에서 소멸까지의 프로세스가 수행되는 일정한 수의 단계가 있습니다. 구성 요소의 여러 단계를 '수명 주기 후크 이벤트'라고 합니다.

Angular 내에서 구성 요소를 제어하기 위해 개발자는 응용 프로그램의 여러 단계에서 후크 이벤트를 사용할 수 있습니다. 개발자가 Angular의 모든 구성 요소에서 사용할 수 있는 8가지 유형의 수명 주기 후크 이벤트가 있습니다. 특정 수명 주기 이벤트에 해당하는 함수 호출은 개발자가 추가해야 합니다.

구성 요소는 typescript 클래스에 속하므로 모든 구성 요소에 대해 생성자 메서드가 있어야 합니다. 각도 수명 주기 후크 를 실행하기 전에 항상 먼저 실행되는 구성 요소 클래스 생성자입니다 . 종속성을 추가하기 위해 생성자를 필요한 작업에 사용할 수 있습니다. 각도 수명 주기 후크 는 특정 순서로 실행됩니다.

Angular에서 구성 요소의 초기화가 있을 때마다 루트 구성 요소가 만들어지고 표시됩니다. 그런 다음 구성 요소의 상속인이 생성됩니다.

수명 주기 단계의 분할은 구성 요소에 연결하는 단계와 구성 요소의 자식에 연결하는 단계의 두 단계로 발생합니다.

더 읽어보기: 흥미로운 Angular 프로젝트 아이디어

다양한 유형의 수명 주기 후크

1. ngOnChanges –

이 이벤트는 입력 제어 값이 변경될 때마다 호출됩니다. 바인딩된 속성 값이 변경되면 이 이벤트가 발생합니다. 변경 사항을 포함하는 데이터 맵, 즉 SimpleChange 내 속성의 이전 값과 현재 값입니다.

• 속성
  • 입력이 있는 구성 요소는 메서드를 사용할 수 있습니다.
  • 입력 값이 변경될 때마다 메서드가 호출됩니다.

2. ngOnInit

구성 요소의 초기화 또는 바인딩된 데이터의 속성 표시 후 ngOnInit의 이벤트가 초기화됩니다. 이벤트는 ngOnChanges 이벤트 이후에 한 번만 호출됩니다. 따라서 이벤트는 주로 구성 요소 데이터를 초기화하는 역할을 합니다.

• 속성
  • 구성 요소의 데이터는 이 이벤트에 의해 초기화됩니다.
  • 메소드는 입력 값이 설정될 때 호출됩니다.
  • Angular CLI는 기본적으로 모든 구성 요소에 이 후크를 추가했습니다.
  • 메서드는 한 번만 호출할 수 있습니다.

3. ngDoCheck

Angular 구성 요소의 입력 속성을 확인한 후 ngDoCheck 이벤트가 발생합니다. 주로 각도가 감지하지 못하는 변경 사항을 감지하거나 조치를 취하기 위해 수행됩니다. 개발자의 논리에 따라 검사를 구현할 수 있습니다. 따라서 이벤트에서 구성 요소의 변경 감지를 위한 사용자 지정 변경 논리 또는 알고리즘의 구현이 허용됩니다.

• 속성
  • 각도 변경 감지에 대해 이 방법을 실행합니다.
  • 이 메서드는 변경 사항을 감지하기 위해 호출됩니다.

4. ngAfterContentInit –

구성 요소 보기 내에서 외부 콘텐츠를 투영한 후 ngAfterContentInit 이벤트가 호출됩니다. 처음으로 모든 구성 요소 바인딩을 확인하기 위해 이 메서드가 처음으로 실행됩니다. 그 실행은 ngDoCheck() 메서드가 실행되는 즉시 이어집니다. 자식 구성 요소는 일반적으로 이 메서드와 연결됩니다.

• 속성
• • 처음에 이 메서드는 ngDoCheck 후에 호출됩니다.

• • 작업은 콘텐츠 초기화로 수행됩니다.

5. ngAfterContentChecked –

외부 콘텐츠를 구성 요소에 투영한 다음에는 투영된 콘텐츠를 확인합니다. 이 메서드는 각도 변경 감지 메커니즘을 통해 내용을 확인할 때마다 호출됩니다. ngAfterContentInit() 메소드 실행 후 실행됩니다. 또한 이 메서드는 ngDoCheck()의 후속 실행 후에 실행됩니다. 일반적으로 자식 구성 요소의 초기화와 연결됩니다.

• 속성

• • 시작하기 위해 메서드는 ngContentInit가 완료될 때까지 기다립니다.

• • ngDocheck 이후에 실행됩니다.

6. ngAfterViewInit

Angular 구성 요소와 자식 구성 요소의 초기화와 함께 ngAfterViewInit 메서드가 호출됩니다. ngAfterContentChecked 메서드 실행 후 ngAfterViewInit 메서드가 처음으로 호출됩니다. 이 방법은 각도의 구성 요소에만 적용할 수 있습니다.

• 속성

  • 구성 요소 보기가 초기화된 후 메서드에 대한 호출이 생성된 후에만.

7. ngAfterViewChecked –

ngAfterViewInit 메서드 바로 다음에 ngAfterViewChecked 메서드가 호출됩니다. angular의 변경 감지 방법이 구성 요소를 검사할 때마다 ngAfterViewChecked의 메서드가 실행됩니다. 이 메서드는 ngAfterContentChecked() 실행 후에도 실행됩니다. 또한 자식 컴포넌트의 지시문 바인딩이 변경되면 메서드가 실행됩니다.

• 속성

• • 초기화 및 확인 후 호출이 생성됩니다.

• • ngDocheck의 모든 메소드가 완료된 후 메소드 작업이 시작됩니다.

8. ngOnDestroy

이 메서드는 angular에 의해 구성 요소가 파괴되기 직전에 호출됩니다. 메모리 누수 시나리오를 피하기 위해 이 메서드는 이벤트 핸들러를 분리할 수 있으며 옵저버블 구독 취소에도 유용합니다. 한 번만 메서드가 호출되어 DOM에서 구성 요소를 제거합니다.

• 속성

• • 호출은 DOM에서 구성 요소를 제거하기 직전에 생성됩니다.

Angular 라이프사이클의 인터페이스

구성 요소의 클래스는 각도 수명 주기 후크 메서드를 정의하는 데 사용할 수 있습니다. 그러나 인터페이스의 도움으로 메서드를 호출할 수 있습니다. 인터페이스 이름은 접두사 "ng"를 생략하고 메서드 이름과 유사합니다. 이는 라이프사이클 후크의 각 메소드에 typescript 인터페이스가 있기 때문입니다. 예를 들어 ngOnInit의 인터페이스는 OnInit라고 합니다. 단일 인터페이스를 통해 수명 주기 후크의 하나의 이벤트만 정의됩니다. 또한 인터페이스가 구현되지 않은 경우 컴파일러에서 컴파일 오류가 발생하지 않습니다.

예시:

수명 주기 후크를 구현하는 예가 표시되었습니다. 아래의 코드는 'app.component.ts' 파일에 넣어야 합니다. 원천

수명 주기 후크 ngOnInit를 호출하는 방법을 보여줍니다.

'ng-example' 리포지토리에 모듈을 추가하는 예는 아래와 같습니다. 모듈 이름은 변경 예라고 하는 'ngOnChanges'의 예에 대한 구성 요소(부모 및 자식 모두)가 있는 lifecycle-hooks입니다. 구성 요소 lifecycle-hooks에 라우팅하기 위해 라우팅이 사이드바에 추가되고 구성 요소 'changes-example'이 해당 구성 요소 내부에 배치됩니다. 이것은 자식 구성 요소와 함께 부모 구성 요소를 보여줍니다.

그러면 수명 주기 후크의 모든 메서드가 console.log()라는 이벤트 후크의 이름과 함께 두 구성 요소에 모두 추가됩니다. 자식은 부모와 자식 구성 요소를 구별하기 위해 자식 콘솔의 문에 추가됩니다.

부모 구성 요소의 모양은 아래와 같습니다.

원천

자식 구성 요소는 동일하지만 console.log 명령문의 일부입니다.

ng 서브를 실행하면 이벤트 발생 순서가 표시됩니다. 실행되는 메서드의 순서를 설명합니다. 컴포넌트 초기화, 그 내용, 내용 확인, 초기화, 자식 컴포넌트 확인 구성 요소의 보기가 초기화되고 확인된다는 최종 선언이 이어집니다.

더 읽어보기: Angular 프로젝트를 실행하는 방법

다음 단계에서 부모 구성 요소는 자식에 대한 입력의 일부 값이 조작되는 간단한 이벤트와 함께 추가됩니다. 이를 위해 버튼이 상위 구성 요소에 추가되어 클릭하면 값이 1만큼 증가합니다. 증분은 입력으로 자식에게 전달되고 표시됩니다.

원천

부모 html의 모양은 다음과 같습니다.

입력 '숫자'는 다음과 같이 표시됩니다.

<h4>{{num}}</h4>

'+' 버튼을 클릭하면 구성 요소에 대해 수명 주기 후크의 이벤트가 실행되는 이벤트가 발생합니다. 자식에 대한 입력 값이 'ngOnChanges'에 의해 감지되면 'ngOnChanges' 이벤트가 자식에서 발생합니다.

세계 최고의 대학에서 온라인으로 소프트웨어 과정 을 배우십시오 . 이그 제 큐 티브 PG 프로그램, 고급 인증 프로그램 또는 석사 프로그램을 획득하여 경력을 빠르게 추적하십시오.

결론

이 기사에서는 각 구성 요소의 단계에 대한 개요를 제공했습니다. Angular 라이프사이클 후크 가 진행 되는 특정 순서 가 논의되고 이러한 이벤트의 적용도 표시됩니다.

이러한 소프트웨어 구성 요소의 적용 범위를 넓히기 위해 upGrad , " 소프트웨어 개발의 PG 프로그램 - 풀 스택 개발의 전문화 " 과정을 확인할 수 있습니다. 21세에서 45세 사이의 모든 중간 수준 전문가는 IIIT-Bangalore 에서 인증한 과정에 참여할 수 있습니다. 온라인 과정은 라이브 강의, 실습 경험, IIIT-B 동문 자격, 데이터 과학 및 기계 학습 4개월 인증의 혜택을 무료로 제공합니다. 당신이 여전히 꿈의 직업을 얻는 것을 목표로 하고 있다면, 최고의 산업에 대한 배치를 보장하는 과정을 진행하십시오. 우리 팀은 모든 질문을 환영합니다.