Angular コンポーネントの対話方法に関する簡単な説明

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

#Angular コンポーネント インタラクション

コンポーネント インタラクション: コンポーネント通信では 2 つの共有が可能です1 つ以上のコンポーネント間の情報。

使用シナリオ: 特定の機能が複数のコンポーネントで使用される場合、特定の機能をサブコンポーネントにカプセル化し、特定のタスクをサブコンポーネントで処理することができます。またはワークフロー。

インタラクション メソッド:

メソッド 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 コンポーネントの対話方法に関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。