각도 학습은 수명주기에 대해 이야기합니다.

이 글은 여러분이 계속해서 Angle을 학습하는데 도움이 될 것입니다. 개발을 위해 Angle을 사용하게 되면, Angular의 라이프 사이클에 대해 이야기해 보도록 하겠습니다.

react 및 vue 개발에 노출된 독자라면 라이프사이클 개념에 익숙할 것입니다. angular를 사용하여 개발할 때 피할 수 없는 일입니다. react 和 vue 开发的读者应该对生命周期这个概念不陌生。我们在使用 angular 开发的过程中，是避免不了的。

组件从开始建立到销毁的过程中，会经历过一系列的阶段。这就是一个生命周期，这些阶段对应着应用提供的 lifecycle hooks。

那么，在 angular 中，这些 hooks 都有哪些呢？了解它们，对你编写程序应该在哪里编写，很重要。【相关教程推荐：《angular教程》】

angular 中，生命周期执行的顺序如下：

- constructor 【常用，不算钩子函数，但是很重要】
- ngOnChanges【常用】
- ngOnInit【常用】
- ngDoCheck
  - ngAfterContentInit
  - ngAfterContentChecked
  - ngAfterViewInit【常用】
  - ngAfterViewChecked
- ngOnDestroy【常用】

为了解说和验证，我们用 angular-cli 生成一个 demo 项目。

constructor

在 es6 中的 class 初始化对象的时候，constructor 会立即被调用。

class Person {
  constructor(name) {
    console.log('be called')
    this.name = name;
  }
}

let jimmy = new Person('jimmy'); // be called

angular 的组件本身就是导出一个类。当这个组件被 new 起来的时候，会获取 constructor 中的预设的值。

ngOnChanges

当我们有外部参数更改的时候，我们就会执行 ngOnChanges，也就是说组件中有 @Input 所绑定的属性值发生改变的时候调用。

简单说，父组件绑定子组件中的元素，会触发这个钩子函数，可以多次出发。这在下面的 ngOnInit 总会介绍。

ngOnInit

这个方法调用的时候，说明组件已经初始化成功。在第一次 ngOnChanges() 完成之后调用，且只调用一次。

// app.component.ts
export class AppComponent implements OnInit, OnChanges {

  constructor() {
    console.log('1. constructor')
  }

  ngOnChanges() {
    console.log('2. ngOnChanges')
  }

  ngOnInit() {
    console.log('3. ngOnInit')
  }
}

打印的信息如下：

咦？怎么没有打印 ngOnChanges 中的钩子函数信息呢？

上面已经说过了，需要触发条件 @Input 的属性值改变的时候。我们来修改一下：

<!-- app.component.html -->
<div>
  <app-demo></app-demo>
</div>

// app.component.ts
// AppComponent 类中添加属性
public count:number = 0;

<!-- demo.component.html -->
<h3>count: {{ count }}</h3>

// demo.component.ts
export class DemoComponent implements OnInit, OnChanges {

  @Input()
  public count: number;

  constructor() {
    console.log('1. demo constructor')
  }

  ngOnChanges() {
    console.log('2. demo ngOnChanges')
  }

  ngOnInit() {
    console.log('3. demo ngOnInit')
  }

}

当通过 @Input 将值传递给子组件 demo 的时候，就会触发 demo 组件中的 ngOnChanges。

当 @Input 传递的属性发生改变的时候，可以多次触发 demo 组件中的 ngOnChanges 钩子函数。

<!-- app.component.html -->
<div>
  <app-demo [count]="count"></app-demo>

  <button (click)="parentDemo()">parent button</button>
</div>

// app.component.ts
parentDemo() {
  this.count++;
}

ngDoCheck

当发生变化检测的时候，触发该钩子函数。

这个钩子函数，紧跟在每次执行变更检测时候 ngOnChanges 和首次执行执行变更检测时 ngOnInit 后面调用。

// demo.component.ts

ngDoCheck() {
  console.log('4. demo ngDoCheck')
}

这个钩子函数调用得比较频繁，使用成本比较高，谨慎使用。

一般使用 ngOnChanges 来检测变动，而不是 ngDoCheck

ngAfterContentInit

当把外部的内容投影到内部组件，第一次调用 ngDoCheck 之后调用 ngAfterContentInit，而且只调用一次。

// demo.component.ts

ngAfterContentInit() {
  console.log('5. demo ngAfterContentInit');
}

ngAfterContentChecked

ngAfterContentChecked 钩子函数在每次 ngDoCheck 之后调用.

// demo.component.ts

ngAfterContentChecked() {
  console.log('5. demo ngAfterContentChecked');
}

ngAfterViewInit

视图初始化完成调用此钩子函数。在第一次 ngAfterContentChecked 之后调用，只调用一次。

这个时候，获取页面的 DOM

구성 요소는 생성부터 파괴까지 일련의 단계를 거칩니다. 이는 수명 주기이며 이러한 단계는 애플리케이션에서 제공하는 수명 주기 후크에 해당합니다.

그럼 angular의 훅은 무엇인가요? 프로그램을 작성해야 하는 위치에 대해서는 이를 이해하는 것이 중요합니다. [추천 관련 튜토리얼: "Angular 튜토리얼"]

🎜angular< /code>에서 라이프사이클 실행 순서는 다음과 같습니다. 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">// demo.compoent.ts ngAfterViewInit() { console.log(&amp;#39;7. demo ngAfterViewInit&amp;#39;); }</pre><div class="contentsignin">로그인 후 복사</div></div>🎜설명과 검증을 위해 <code>angular-cli를 사용하여 demo 프로젝트를 생성합니다. 🎜

생성자

🎜 es6의 클래스가 객체를 초기화할 때 < code>constructor가 즉시 호출됩니다. 🎜

// demo.component.ts

ngAfterViewChecked() {
  console.log('8. ngAfterViewChecked')
}

🎜angular의 구성 요소 자체는 클래스를 내보냅니다. 이 구성 요소가 새인 경우 생성자에서 기본값을 가져옵니다. 🎜

ngOnChanges

🎜외부 매개변수가 변경되면 ngOnChanges를 실행한다고 합니다. 바인딩된 속성 값이 변경될 때 호출되는 구성 요소에 @Input이 있다는 것입니다. 🎜🎜간단히 말하면, 상위 구성 요소가 하위 구성 요소의 요소를 바인딩하면 이 후크 기능이 트리거되고 여러 번 시작될 수 있습니다. 이는 항상 아래 ngOnInit에 소개되어 있습니다. 🎜

ngOnInit

🎜 이 메소드가 호출되면 구성요소가 성공적으로 초기화되었음을 의미합니다. 첫 번째 ngOnChanges()가 완료된 후 한 번만 호출됩니다. 🎜

<!-- app.component.html -->
<app-demo [count]="count" *ngIf="showDemoComponent"></app-demo>

<button (click)="hideDemo()">hide demo component</button>

🎜인쇄된 정보는 다음과 같습니다. 🎜🎜🎜🎜어? ngOnChanges의 후크 기능 정보가 인쇄되지 않는 이유는 무엇입니까? 🎜🎜위에서 언급한 것처럼 @Input의 속성 값이 변경되면 트리거 조건이 트리거되어야 합니다. 수정해 보겠습니다: 🎜

// app.component.ts
public showDemoComponent: boolean = true;

hideDemo() {
  this.showDemoComponent = false
}

// demo.component.ts
ngOnDestroy() {
  console.log('9. demo ngOnDestroy')
}

rrreeerrreee🎜🎜🎜@Input을 통해 하위 구성 요소인 demo에 값이 전달되면 demo 구성 요소의 는 ngOnChanges가 실행되었습니다. 🎜🎜@Input에 의해 전달된 속성이 변경되면 demo 구성 요소의 ngOnChanges 후크 기능이 여러 번 트리거될 수 있습니다. 🎜rrreeerrree🎜🎜< h3 data-id="heading-3">ngDoCheck🎜이 후크 기능은 변경 감지가 발생하면 트리거됩니다. 🎜🎜이 후크 함수는 변경 감지가 수행될 때마다 ngOnChanges가 수행되고 처음으로 변경 감지가 수행될 때 ngOnInit 직후에 호출됩니다. 🎜rrreee🎜🎜🎜 이 Hook 함수는 더 자주 호출되고 사용 비용이 더 많이 들기 때문에 주의해서 사용하세요. 🎜

🎜일반적으로 ngDoCheck 대신 ngOnChanges를 사용하여 변경 사항을 감지합니다🎜

ngAfterContentInit

🎜외부 콘텐츠를 처리할 때 내부 구성 요소에 대해 ngDoCheck가 처음으로 호출된 다음 ngAfterContentInit가 한 번만 호출됩니다. 🎜rrreee🎜🎜< h3 data-id="heading-5">ngAfterContentChecked🎜ngAfterContentChecked 후크 함수는 각 ngDoCheck 후에 호출됩니다.🎜rrreee 🎜 🎜

ngAfterViewInit

🎜뷰 초기화가 완료된 후 이 후크 함수를 호출하세요. 첫 번째 ngAfterContentChecked 이후에 한 번만 호출됩니다. 🎜🎜이때 페이지의 DOM 노드를 얻는 것이 더 합리적입니다🎜rrreee🎜🎜🎜

ngAfterViewChecked

视图检测完成调用。在 ngAfterViewinit 后调用，和在每次 ngAfterContentChecked 之后调用，也就是在每次 ngDoCheck 之后调用。

// demo.component.ts

ngAfterViewChecked() {
  console.log('8. ngAfterViewChecked')
}

ngOnDestroy

组件被销毁时候进行的操作。

在这个钩子函数中，我们可以取消订阅，取消定时操作等等。

<!-- app.component.html -->
<app-demo [count]="count" *ngIf="showDemoComponent"></app-demo>

<button (click)="hideDemo()">hide demo component</button>

// app.component.ts
public showDemoComponent: boolean = true;

hideDemo() {
  this.showDemoComponent = false
}

// demo.component.ts
ngOnDestroy() {
  console.log('9. demo ngOnDestroy')
}

PS: 不知道读者有没有发现，调用一次的钩子函数都比较常用～

更多编程相关知识，请访问：编程入门！！

위 내용은 각도 학습은 수명주기에 대해 이야기합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!