Angular でのコンポーネントの相互作用の詳細な説明

この記事では、Angular コンポーネントの相互作用について詳しく説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Angular コンポーネントの相互作用

コンポーネントの相互作用: コンポーネント通信により、2 つ以上のコンポーネント間で情報を共有できます。 。
使用シナリオ: 特定の機能が複数のコンポーネントで使用される場合、特定の機能をサブコンポーネントにカプセル化し、特定のタスクまたはワークフローをサブコンポーネントで処理できます。
対話メソッド:

• メソッド 1: @Input および @Output デコレータを介して対話します。
• 方法 2: service を通じて対話します。

[関連する推奨事項: "angular チュートリアル "]

---

親コンポーネントから子コンポーネントにデータを転送する

入力タイプを介してデータを転送するバインディングは、親コンポーネントから子コンポーネントにデータを渡します。
input プロパティは、@Input デコレータで設定可能なプロパティです。
プロパティ バインディングを介してバインドされると、値がこのプロパティに「流入」します。

いくつかのコード例は次のとおりです:

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

@Component({
  selector: 'app-selector',
  template: `
    // 模板代码
  `
})
export class TestComponent {
  @Input() hero: Hero;
  @Input('master') masterName: string;
}

上の例には 2 つの入力属性が含まれており、2 番目の @Input はサブコンポーネントの属性名 masterName のエイリアス マスターを指定します。

親コンポーネント内の子コンポーネントを参照します。いくつかのコード例は次のとおりです:

    <app-hero-child *ngFor="let hero of heroes"
      [hero] = "hero"
      [master] = "master">
    </app-hero-child>

---

入力属性値の変更をリッスンする

(1) setter メソッド

入力属性の setter() メソッドを使用して、親コンポーネントの値の変更をインターセプトし、アクションを実行します。

いくつかのコード例は次のとおりです。

export class TestComponent {
	
	@Input()
	set name(name: String) {
		// 逻辑处理
	}
}

(2) ngOnChanges() メソッドを使用する

OnChanges ライフサイクル フック インターフェイスの ngOnChanges() メソッドを使用して監視します。入力属性値の変更と応答。
注: 複数の対話型入力プロパティを監視する必要がある場合、プロパティの setter メソッドを使用するよりもこの方法の方が適切です。

import { Component, Input, OnChanges, SimpleChange } from '@angular/core';

@Component({
  selector: 'app-version-child',
  template: `
  // 模板代码
  `
})
export class ChildComponent implements OnChanges {
  @Input() major: number;
  @Input() minor: number;

  ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
    for (let propName in changes) {
      // propName为输入属性的名字
      let changedProp = changes[propName]; // changedProp为SimpleChange对象
      // 其它代码
    }
  }
}

SimpleChange クラス

子コンポーネントの @angular/core から入力、OnChanges、および SimpleChange をインポートします。

/**
 * Represents a basic change from a previous to a new value for a single
 * property on a directive instance. Passed as a value in a
 * {@link SimpleChanges} object to the `ngOnChanges` hook.
 *
 * @see `OnChanges`
 *
 * @publicApi
 */
export declare class SimpleChange {
    previousValue: any;
    currentValue: any;
    firstChange: boolean;
    constructor(previousValue: any, currentValue: any, firstChange: boolean);
    /**
     * Check whether the new value is the first value assigned.
     */
    isFirstChange(): boolean;
}

ソース コードは次のとおりです。

---

親コンポーネントは子コンポーネントのイベントをリッスンします

子コンポーネントは EventEmitter プロパティを公開します。イベントが発生すると、子コンポーネントはこのプロパティを使用してエミット (上方への排出) ）イベント。親コンポーネントはこのイベント プロパティにバインドされ、イベントが発生すると応答します。

子コンポーネントの EventEmitter プロパティは出力プロパティであり、通常は @Output デコレータが付いています。

——Angular コンポーネント間の相互作用

親コンポーネントと子コンポーネントはサービスを介して通信します

---

親コンポーネントとその子コンポーネントは、このサービスを使用して同じサービスを共有します。コンポーネント ファミリ内の双方向通信。

このサービス インスタンスのスコープは、親コンポーネントとその子コンポーネントに制限されます。このコンポーネント サブツリーの外側にあるコンポーネントは、サービスにアクセスしたり、サービスと通信したりできません。

詳細なドキュメント

---

詳細なドキュメントについては、

Angular コンポーネントのインタラクションに関連する部分を参照してください詳細プログラミング関連の知識については、

プログラミング入門

をご覧ください。 ！

以上がAngular でのコンポーネントの相互作用の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。