Angular의 생명주기에 대해 이야기하는 기사

Angular를 개발에 사용하다 보면 생명주기와의 접촉은 불가피합니다. 이번 글에서는 Angular의 생명주기에 대해 이야기해보겠습니다.

react 및 vue 개발에 노출된 독자라면 라이프사이클 개념에 익숙할 것입니다. angular를 사용하는 개발 과정에서는 이를 피할 수 없습니다. [관련 튜토리얼 추천: "react 和 vue 开发的读者应该对生命周期这个概念不陌生。我们在使用 angular 开发的过程中，是避免不了的。【相关教程推荐：《angular教程》】

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

那么，在 angular 中，这些 hooks 都有哪些呢？了解它们，对你编写程序应该在哪里编写，很重要。

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 节点比较合理

// demo.compoent.ts

ngAfterViewInit() {
  console.log('7. demo ngAfterViewInit');
}

ngAfterViewChecked

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

"]🎜🎜컴포넌트는 처음부터 소멸까지 일련의 단계를 거칩니다. 이는 수명 주기이며 이러한 단계는 애플리케이션에서 제공하는 수명 주기 후크에 해당합니다. 🎜🎜그럼 angular의 훅은 무엇인가요? 프로그램을 작성해야 하는 위치에 대해서는 이를 이해하는 것이 중요합니다. 🎜🎜angular에서 라이프사이클 실행 순서는 다음과 같습니다. 🎜

// demo.component.ts

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

🎜설명과 확인을 위해 angular-cli를 사용하여 데모<를 생성합니다. /코드> 프로젝트 . 🎜<h3 data-id="heading-0">생성자</h3>🎜<code>es6의 클래스가 객체를 초기화할 때 생성자</code > 즉시 호출됩니다. 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">&lt;!-- app.component.html --&gt; &lt;app-demo [count]=&quot;count&quot; *ngIf=&quot;showDemoComponent&quot;&gt;&lt;/app-demo&gt; &lt;button (click)=&quot;hideDemo()&quot;&gt;hide demo component&lt;/button&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>🎜<code>angular의 구성 요소 자체는 클래스를 내보냅니다. 이 구성 요소가 새인 경우 생성자에서 기본값을 가져옵니다. 🎜

ngOnChanges

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

ngOnInit

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

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

hideDemo() {
  this.showDemoComponent = false
}

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

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

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

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

ngAfterContentInit

🎜외부 콘텐츠를 내부 구성 요소에 프로젝션할 때 먼저 를 호출하세요. <code>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: 不知道读者有没有发现，调用一次的钩子函数都比较常用～

【完】

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

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