Angular のライフサイクルについて説明する記事-jsチュートリアル-php.cn

Angular のライフサイクルについて説明する記事

青灯夜游

リリース： 2022-05-06 10:58:03

転載

3864 人が閲覧しました

開発に Angular を使用する場合、ライフサイクルにさらされることは避けられません。次の記事では、Angular のライフサイクルについて説明します。皆様のお役に立てれば幸いです。

Angular のライフサイクルについて説明する記事

react と vue の開発に携わったことのある読者は、ライフサイクルの概念に精通しているはずです。 angular を使用した開発プロセスではこれを避けることはできません。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

コンポーネントは、開始から破棄まで一連の段階を経ます。これはライフサイクルであり、これらの段階はアプリケーションによって提供される ライフサイクルフックに対応します。

それでは、angular の フック とは何でしょうか?これらを理解することは、プログラムをどこに記述するかについて重要です。

angular、ライフサイクルの実行順序は次のとおりです:

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

ログイン後にコピー

説明と検証のために、angular-cli を使用してデモプロジェクト。

constructor

es6 の class がオブジェクトを初期化すると、constructor がすぐに呼び出されます。

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

let jimmy = new Person(&#39;jimmy&#39;); // be called

ログイン後にコピー

angular コンポーネント自体がクラスをエクスポートします。このコンポーネントが new の場合、constructor でデフォルト値が取得されます。

ngOnChanges

外部パラメータを変更すると、ngOnChanges が実行されます。これは、コンポーネントが @Input にバインドされることを意味します。指定された属性値が変更されます。

簡単に言えば、親コンポーネントが子コンポーネントの要素をバインドすると、このフック関数がトリガーされ、複数回開始できます。これについては、以下の ngOnInit で紹介します。

ngOnInit

このメソッドが呼び出されると、コンポーネントが正常に初期化されたことを意味します。最初の ngOnChanges() が完了した後に、1 回だけ呼び出されます。

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

  constructor() {
    console.log(&#39;1. constructor&#39;)
  }

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

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

ログイン後にコピー

出力される情報は次のとおりです。

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 のライフサイクルについて説明する記事

このフック関数はより頻繁に呼び出され、使用コストが高くなるため、注意して使用してください。

通常、変更を検出するには ngDoCheck の代わりに ngOnChanges を使用します。

ngAfterContentInit

外部コンテンツを内部コンポーネントに投影するときは、初めてこれを呼び出しますngDoCheck は、ngAfterContentInit の後に 1 回だけ呼び出されます。

// 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 の後に 1 回だけ呼び出されます。

現時点では、ページ

// demo.compoent.ts

ngAfterViewInit() {
  console.log(&#39;7. demo ngAfterViewInit&#39;);
}

ログイン後にコピー

ngAfterViewChecked Angular のライフサイクルについて説明する記事 ##の

DOM

ノードを取得する方が合理的です。 #View 検出完了呼び出し。

ngAfterViewinit

の後に呼び出され、各 ngAfterContentChecked の後に呼び出されます。つまり、各 ngDoCheck の後に呼び出されます。

// demo.component.ts

ngAfterViewChecked() {
  console.log(&#39;8. ngAfterViewChecked&#39;)
}

ログイン後にコピー

`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;)
}

ログイン後にコピー


PS: 不知道读者有没有发现，调用一次的钩子函数都比较常用～
【完】
更多编程相关知识，请访问：编程入门！！
以上がAngular のライフサイクルについて説明する記事の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。