Angular 学習でコンポーネントの通信とコンポーネントのライフサイクルについて語る

コンポーネント通信

1. データをコンポーネントに渡します

<app-favorite [isFavorite]="true"></app-favorite>

// favourite.component.ts
import { 入力 } から '@angular/core';
エクスポートクラス FavoriteComponent {
    @Input() はお気に入りです: ブール値 = false;
[

関連するチュートリアルの推奨事項: 「angular チュートリアル」]

注: 属性の外側に[]を追加すると、コンポーネントで受け取った後に動的値をバインドすることになります。 []を追加しない場合は、通常の値をバインドすることになります。コンポーネント内のそれは字符串类型です。

<app-favorite [is-Favorite]="true"></app-favorite>

import { Input } from '@angular/core';

エクスポートクラス FavoriteComponent {
  @Input("is-Favorite") isFavorite: ブール値 = false
2.

コンポーネントは

<!-- サブコンポーネント テンプレート -->

のボタンをクリックして、データを親コンポーネントに渡します。

<button (click)="onClick()">click</button>

// サブコンポーネント クラス import { EventEmitter, Output } from "@angular/core"

エクスポートクラス FavoriteComponent {
  @Output() 変更 = 新しい EventEmitter()
  onClick() {
    this.change.emit({ 名前: "張三" })
  }
<

!-- 親コンポーネント テンプレート -->
<app-favorite (change)="onChange($event)"></app-favorite>

// 親コンポーネント クラスのエクスポート クラス AppComponent {
  onChange(イベント: { 名前: 文字列 }) {
    コンソール.ログ(イベント)
  }
コンポーネント

のライフサイクル

1. マウントフェーズ

マウントフェーズのライフサイクル機能は、マウントフェーズ中に 1 回だけ実行され、データが更新されると実行されなくなります。

1) コンストラクター

Angular は、コンポーネント クラスをインスタンス化するときに実行され、Angular によって挿入されたサービス インスタンス オブジェクトを受け取るために使用できます。

エクスポート クラス ChildComponent {
  コンストラクター (プライベート テスト: TestService) {
    console.log(this.test) // "テスト"
  }
2

)、

初めて入力属性値を受け取った後に ngOnInit が実行され、要求された操作をここで実行できます。

<app-child name="Zhang San"></app-child>

エクスポート クラス ChildComponent は OnInit {を実装します
  @Input("name") 名前: 文字列 = ""
  ngOnInit() {
    console.log(this.name) // "張三"
  }
3

)、ngAfterContentInit

は、コンテンツ投影の最初のレンダリングが完了した後に呼び出されます。

<アプリの子>
	<div #box>こんにちは Angular</div>
</app-child>

エクスポート クラス ChildComponent は AfterContentInit を実装します {
  @ContentChild("box") ボックス: ElementRef<HTMLDivElement> |

  ngAfterContentInit() {
    console.log(this.box) // <div>Hello Angular</div>
  }
4

)、

コンポーネント ビューがレンダリングされた後に ngAfterViewInit が呼び出されます。

<!-- アプリの子コンポーネント テンプレート -->
<p #p>app-child works</p>

エクスポート クラス ChildComponent 実装 AfterViewInit {
  @ViewChild("p") p: ElementRef<HTMLParagraphElement> |
  ngAfterViewInit() {
    console.log(this.p) // <p>app-child は機能します</p>
  }
2.

更新フェーズ

1)、ngOnChanges は

• 入力属性値が変更されたときに実行され、初期設定中に 1 回実行されます。その順序は、

• 同時に変更される入力属性の数に関係なく、ngOnInit よりも優れています

。

• パラメータは 1 回のみ実行され、変更された値も同時に保存されます。パラメータの

• タイプは SimpleChanges、サブプロパティのタイプは SimpleChange である

• ため、基本的なデータ型であれば検出できます

。

• 値の変更

• 。参照データ型の場合、あるオブジェクトから別のオブジェクトへの変更を検出できますが、同じオブジェクト内のプロパティ値の変更はコンポーネント テンプレートの更新データには影響しません。

基本データ型の値の変更

<app-child [name]="name" [age]="age"></app-child>
<button (click)="change()">change</button>

エクスポート クラス AppComponent {
  名前: 文字列 = "張三";
  年齢: 数値 = 20
  変化（） {
    this.name = "李思"
    この年齢 = 30
  }

エクスポート クラス ChildComponent は OnChanges を実装します

{

  @Input("name") 名前: 文字列 = ""
  @Input("年齢") 年齢: 数値 = 0

  ngOnChanges(変更: SimpleChanges) {
    console.log("基本的なデータ型の値の変更を検出できます")
  }
参照

データ型の変更

<app-child [person]="person"></app-child>
<button (click)="change()">change</button>

エクスポート クラス AppComponent {
  person = { 名前: "张三"、年齢: 20 }
  変化（） {
    this.person = { 名前: "李思"、年齢: 30 }
  }

エクスポート クラス ChildComponent は OnChanges を実装します

{

  @Input("人") 人 = { 名前: ""、年齢: 0 }

  ngOnChanges(変更: SimpleChanges) {
    console.log("参照データ型の場合、参照アドレスの変更のみ検出でき、オブジェクト属性の変更は検出できません")
  }
2

)、ngDoCheck: 主にデバッグに使用され、基本データ型、参照データ型、または参照データ型の属性変更に関係なく、入力属性が変更される限り実行されます。

3)、ngAfterContentChecked: コンテンツ投影の更新が完了した後に実行されます。

4)、ngAfterViewChecked: コンポーネント ビューが更新された後に実行されます。

3. アンインストール フェーズ

1)、

コンポーネントが破棄される前に ngOnDestroy が呼び出され、クリーンアップ操作に使用されます。

エクスポート クラス HomeComponent は OnDestroy を実装します {
  ngOnDestroy() {
    console.log("コンポーネントがアンインストールされました")
  }
}