> 웹 프론트엔드 > JS 튜토리얼 > Angular의 생명주기에 대해 이야기하는 기사

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

青灯夜游
풀어 주다: 2022-05-06 10:58:03
앞으로
3871명이 탐색했습니다.

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

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

reactvue 개발에 노출된 독자라면 라이프사이클 개념에 익숙할 것입니다. angular를 사용하는 개발 과정에서는 이를 피할 수 없습니다. [관련 튜토리얼 추천: "reactvue 开发的读者应该对生命周期这个概念不陌生。我们在使用 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')
  }
}
로그인 후 복사

打印的信息如下:

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

咦?怎么没有打印 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(&#39;1. demo constructor&#39;)
  }

  ngOnChanges() {
    console.log(&#39;2. demo ngOnChanges&#39;)
  }

  ngOnInit() {
    console.log(&#39;3. demo ngOnInit&#39;)
  }

}
로그인 후 복사

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

当通过 @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++;
}
로그인 후 복사

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

ngDoCheck

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

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

// demo.component.ts

ngDoCheck() {
  console.log(&#39;4. demo ngDoCheck&#39;)
}
로그인 후 복사

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

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

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

ngAfterContentInit

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

// demo.component.ts

ngAfterContentInit() {
  console.log(&#39;5. demo ngAfterContentInit&#39;);
}
로그인 후 복사

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

ngAfterContentChecked

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

// demo.component.ts

ngAfterContentChecked() {
  console.log(&#39;5. demo ngAfterContentChecked&#39;);
}
로그인 후 복사

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

ngAfterViewInit

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

这个时候,获取页面的 DOM 节点比较合理

// demo.compoent.ts

ngAfterViewInit() {
  console.log(&#39;7. demo ngAfterViewInit&#39;);
}
로그인 후 복사

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

ngAfterViewChecked

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

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

ngAfterViewChecked() {
  console.log(&#39;8. ngAfterViewChecked&#39;)
}
로그인 후 복사
로그인 후 복사
🎜설명과 확인을 위해 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
}
로그인 후 복사
로그인 후 복사
🎜인쇄된 정보는 다음과 같습니다. 🎜🎜1 .png🎜🎜어? ngOnChanges의 후크 기능 정보가 인쇄되지 않는 이유는 무엇입니까? 🎜🎜위에서 언급한 것처럼 @Input의 속성 값이 변경되면 트리거 조건이 트리거되어야 합니다. 수정해 보겠습니다: 🎜
// demo.component.ts
ngOnDestroy() {
  console.log(&#39;9. demo ngOnDestroy&#39;)
}
로그인 후 복사
로그인 후 복사
rrreeerrreeerrreee🎜Angular의 생명주기에 대해 이야기하는 기사 🎜🎜@Input을 통해 하위 구성 요소인 demo에 값이 전달되면 demo 구성 요소의 는 ngOnChanges가 실행되었습니다. 🎜🎜@Input에 의해 전달된 속성이 변경되면 demo 구성 요소의 ngOnChanges 후크 기능이 여러 번 트리거될 수 있습니다. 🎜rrreeerrree🎜Angular의 생명주기에 대해 이야기하는 기사🎜< h3 data-id="heading-3">ngDoCheck🎜변경 감지가 발생하면 이 후크 기능이 트리거됩니다. 🎜🎜이 후크 함수는 변경 감지가 수행될 때마다 ngOnChanges가 수행되고 처음으로 변경 감지가 수행될 때 ngOnInit 직후에 호출됩니다. 🎜rrreee🎜Angular의 생명주기에 대해 이야기하는 기사🎜🎜 이 Hook 함수는 더 자주 호출되고 사용 비용이 더 많이 들기 때문에 주의해서 사용하세요. 🎜
🎜일반적으로 ngDoCheck 대신 ngOnChanges를 사용하여 변경 사항을 감지합니다🎜

ngAfterContentInit

🎜외부 콘텐츠를 내부 구성 요소에 프로젝션할 때 먼저 를 호출하세요. <code>ngDoCheck를 여러 번, 단 한 번만 호출한 후 ngAfterContentInit. 🎜rrreee🎜Angular의 생명주기에 대해 이야기하는 기사🎜< h3 data-id="heading-5">ngAfterContentChecked🎜ngAfterContentChecked 후크 함수는 각 ngDoCheck.🎜rrreee🎜Angular의 생명주기에 대해 이야기하는 기사🎜

ngAfterViewInit

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

ngAfterViewChecked

🎜보기 감지 완료 호출. ngAfterViewinit 이후에 호출되고 ngAfterContentChecked마다 호출됩니다. 즉, ngDoCheck마다 호출됩니다. 🎜
// demo.component.ts

ngAfterViewChecked() {
  console.log(&#39;8. ngAfterViewChecked&#39;)
}
로그인 후 복사
로그인 후 복사

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

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(&#39;9. demo ngOnDestroy&#39;)
}
로그인 후 복사
로그인 후 복사

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

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

【完】

更多编程相关知识,请访问:编程入门!!

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

관련 라벨:
원천:juejin.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿