Angular의 구성 요소 수명 주기에 대한 간략한 설명

이 글에서는 Angular에서 컴포넌트의 라이프사이클(Component Lifecycle Hook)을 소개하겠습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

환경:

• Angular CLI: 11.0.6

• Angular: 11.0.7

• 노드: 12.18.3

• npm : 6.14.6

• IDE : Visual Studio Code

1. 요약

구성 요소 인스턴스의 수명 주기는 Angular가 구성 요소 클래스를 인스턴스화하고 구성 요소 뷰와 해당 하위 뷰를 렌더링할 때 시작됩니다. 수명 주기에는 항상 변경 감지가 수반되며, 데이터 바인딩된 속성이 변경되면 Angular가 확인하고 필요에 따라 뷰 및 구성 요소 인스턴스를 업데이트합니다. Angular가 구성 요소 인스턴스를 삭제하고 DOM에서 렌더링된 템플릿을 제거하면 수명 주기가 종료됩니다. 지시문은 Angular가 실행 중에 인스턴스를 생성, 업데이트 및 삭제하는 것과 유사한 수명 주기를 갖습니다. [관련 튜토리얼 권장 사항: "angular tutorial"]

애플리케이션은 수명 주기 후크 방법을 사용하여 구성 요소 또는 명령 수명 주기의 주요 이벤트를 트리거하여 필요한 경우 변경 감지 프로세스 중에 새 인스턴스를 초기화하고 변경 감지를 시작할 수 있습니다. 업데이트에 응답하고 인스턴스를 삭제하기 전에 정리합니다.

2. 라이프 사이클 및 순서

• ngOnChanges(): Angular가 데이터 바인딩의 입력 속성을 설정하거나 재설정할 때 응답합니다.

• ngOnInit(): Angular가 먼저 데이터 바인딩을 표시한 후 지시문/구성 요소를 초기화하고 지시문/구성 요소의 입력 속성을 설정합니다.

• ngDoCheck(): 변경 감지가 수행될 때마다 ngOnChanges() 후에 호출되고 처음 변경 감지가 수행될 때 ngOnInit() 후에 호출됩니다.

• ngAfterContentInit(): Angular가 외부 콘텐츠를 구성 요소 뷰 또는 지시어가 있는 뷰에 투영한 후에 호출됩니다.

• ngAfterContentChecked(): ngAfterContentInit() 및 각 ngDoCheck() 후에 호출됩니다.

• ngAfterViewInit(): Angular가 구성 요소 보기와 해당 하위 보기 또는 이 지시어가 포함된 보기를 초기화한 후에 호출됩니다.

• ngAfterViewChecked(): ngAfterViewInit() 및 ngAfterContentChecked()마다 호출됩니다.

• ngOnDestroy(): Angular가 리소스를 정리하고 해제하기 위해 지시어/구성 요소를 삭제하기 전에 매번 호출됩니다.

3. 라이프사이클 이벤트에 응답

Angular에 정의된 하나 이상의 라이프사이클 후크 인터페이스를 구현하여 구성요소 또는 지시문 라이프사이클의 이벤트에 응답합니다. 각 인터페이스에는 고유한 후크 방법이 있으며 해당 이름은 인터페이스 이름과 ng 접두사로 구성됩니다. 예:

@Component()
export class DemoComponent implements OnInit {
  constructor() { }

  // implement OnInit's `ngOnInit` method
  ngOnInit() { 
      // do something here
  }
}

지침:

1) 라이프 사이클 후크 인터페이스를 통해 라이프 사이클의 이벤트에 응답하려면 클래스 이름 뒤에 특정 후크 인터페이스의 구현(구현)을 선언해야 합니다. 그런 다음 실행할 코드에 후크 함수를 정의합니다. 예를 들어 ngOnInit()는 OnInit 인터페이스에 해당합니다. ngOnInit() 对应 接口OnInit 。

2） 可以实现多个钩子接口，例如 export class DemoComponent implements OnInit, OnDestroy {<!-- -->

4. 主要生命周期事件

4.1. 初始化事件 ngOnInit()

使用 ngOnInit() 方法执行以下初始化任务：

• 逻辑稍复杂，不适合放到构造函数中的逻辑

• 初始化中的数据访问逻辑

• 处理需要根据父组件传入参数（@Input）进行初始化的逻辑

4.2. 实例销毁 ngOnDestroy()

把清理逻辑放进 ngOnDestroy() 中，这个逻辑就必然会在 Angular 销毁该指令之前运行。下列逻辑可言放到ngOnDestroy()：

• 取消订阅可观察对象和 DOM 事件。

• 停止 interval 计时器。

• 反注册该指令在全局或应用服务中注册过的所有回调。

• 释放其他占有的资源。

5. 总结

• 使用生命周期事件钩子函数，别忘了类名后面implements

  2) 내보내기 클래스 DemoComponent가 OnInit, OnDestroy {<!-- -->

• 4를 구현하는 등 여러 후크 인터페이스를 구현할 수 있습니다. style ="font-size: 16px;">
4.1. 초기화 이벤트 ngOnInit()

• 다음 초기화 작업을 수행하려면 ngOnInit() 메서드를 사용하세요.

• 로직은 약간 복잡하며 생성자에 배치하기에 적합하지 않음 로직

초기화의 데이터 액세스 로직

🎜🎜은 상위 구성요소의 수신 매개변수(@Input)에 따라 초기화되어야 하는 로직을 처리합니다. 🎜🎜🎜🎜🎜 4.2. 인스턴스 파괴 ngOnDestroy()🎜🎜🎜정리 로직을 ngOnDestroy()에 넣으면 이 로직은 필연적으로 Angular가 명령어를 파괴하기 전에 실행됩니다. 다음 로직을 ngOnDestroy()에 넣을 수 있습니다: 🎜🎜🎜🎜observable 및 DOM 이벤트 구독을 취소합니다. 🎜🎜🎜🎜간격 타이머를 중지하세요. 🎜🎜🎜🎜이 명령으로 등록된 모든 콜백을 전역적으로 또는 애플리케이션 서비스에서 등록 취소합니다. 🎜🎜🎜🎜다른 점유 자원을 해제하세요. 🎜🎜🎜🎜🎜5. 요약🎜🎜🎜🎜🎜라이프 사이클 이벤트 후크 기능을 사용하세요. 클래스 이름 뒤에 해당 인터페이스 구현을 잊지 마세요. 그렇지 않으면 적용되지 않습니다. 🎜🎜초기화 코드는 생성자에 배치해야 하는 것과 ngOnInit()에 배치해야 하는 것을 구별합니다. 🎜🎜🎜🎜 성능 문제를 피하기 위해 간소화된 후크 이벤트 메서드를 사용할 수 있습니다. 🎜🎜🎜🎜ngOnChanges()는 매우 자주 발생합니다. , 복잡한 로직을 추가하면 성능에 영향을 미칩니다. 🎜🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요. ! 🎜

위 내용은 Angular의 구성 요소 수명 주기에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!