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

この記事では、angular におけるコンポーネント通信とコンポーネントのライフサイクルを理解し、コンポーネント内部へのデータ転送方法と外部へのデータ転送方法を簡単に紹介します。皆さんのお役に立てれば幸いです!

#コンポーネント通信

---

1. コンポーネント内でデータを渡す

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

// favorite.component.ts
import { Input } from '@angular/core';
export class FavoriteComponent {
    @Input() isFavorite: boolean = false;
}

[関連チュートリアルの推奨事項: 「

angular チュートリアル」]

注: 動的な値のバインドを示すには、属性の外側に

[] を追加します。 , コンポーネントで受け取った後は、Boolean 型になります。[] がなければ、通常の値をバインドすることを意味します。コンポーネントで受け取った後は、string 型 になります。

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

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

export class FavoriteComponent {
  @Input("is-Favorite") isFavorite: boolean = false
}

2. コンポーネントが外部にデータを転送する

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

<!-- 子组件模板 -->
<button (click)="onClick()">click</button>

// 子组件类
import { EventEmitter, Output } from "@angular/core"

export class FavoriteComponent {
  @Output() change = new EventEmitter()
  onClick() {
    this.change.emit({ name: "张三" })
  }
}

<!-- 父组件模板 -->
<app-favorite (change)="onChange($event)"></app-favorite>

// 父组件类
export class AppComponent {
  onChange(event: { name: string }) {
    console.log(event)
  }
}

#コンポーネントのライフサイクル

---

1. 取り付け段階

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

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

export class ChildComponent {
  constructor (private test: TestService) {
    console.log(this.test) // "test"
  }
}

2)、ngOnInit

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

<app-child name="张三"></app-child>

export class ChildComponent implements OnInit {
  @Input("name") name: string = ""
  ngOnInit() {
    console.log(this.name) // "张三"
  }
}

3), ngAfterContentInit

コンテンツ プロジェクションの最初のレンダリングが完了した後に呼び出されます。

<app-child>
	<div #box>Hello Angular</div>
</app-child>

export class ChildComponent implements AfterContentInit {
  @ContentChild("box") box: ElementRef<HTMLDivElement> | undefined

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

4), ngAfterViewInit

コンポーネント ビューがレンダリングされるときに呼び出されます。

<!-- app-child 组件模板 -->
<p #p>app-child works</p>

export class ChildComponent implements AfterViewInit {
  @ViewChild("p") p: ElementRef<HTMLParagraphElement> | undefined
  ngAfterViewInit () {
    console.log(this.p) // <p>app-child works</p>
  }
}

2、更新フェーズ

1)、ngOnChanges

は、入力属性が次の場合に発生します。値が発生する 変更時に実行され、初期設定時にも一度実行される ngOnInit よりも順序が良い

• 入力属性が同時に変更された場合でも、フック関数は一度だけ実行され、変更された値は同時にパラメータに保存されます。

• パラメータのタイプは SimpleChanges であり、サブプロパティはtype は SimpleChange

• 基本データ型の場合は、値が変化する限り検出できます。

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

• 基本データ型の値の変更

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

export class AppComponent {
  name: string = "张三";
  age: number = 20
  change() {
    this.name = "李四"
    this.age = 30
  }
}

export class ChildComponent implements OnChanges {
  @Input("name") name: string = ""
  @Input("age") age: number = 0

  ngOnChanges(changes: SimpleChanges) {
    console.log("基本数据类型值变化可以被检测到")
  }
}

参照データ型の変更

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

export class AppComponent {
  person = { name: "张三", age: 20 }
  change() {
    this.person = { name: "李四", age: 30 }
  }
}

export class ChildComponent implements OnChanges {
  @Input("person") person = { name: "", age: 0 }

  ngOnChanges(changes: SimpleChanges) {
    console.log("对于引用数据类型, 只能检测到引用地址发生变化, 对象属性变化不能被检测到")
  }
}

2)、 ngDoCheck: 主にデバッグに使用され、基本データ型、参照データ型、または参照データ型の属性変更を問わず、入力属性が変更される限り実行されます。 3)、ngAfterContentChecked: コンテンツ投影の更新が完了した後に実行されます。

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

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

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

export class HomeComponent implements OnDestroy {
  ngOnDestroy() {
    console.log("组件被卸载")
  }
}

プログラミング関連の知識については、

プログラミング ビデオ

をご覧ください。 ！

以上がAngular 学習でコンポーネントの通信とコンポーネントのライフサイクルについて語るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。