Angular の親コンポーネントと子コンポーネントの間で通信する方法についての簡単な説明

この記事では、Angular におけるコンポーネント通信を理解し、親コンポーネントが子コンポーネントに通信する方法、子コンポーネントが親コンポーネントに通信する方法を紹介します。 ！

コンポーネント通信

コンポーネントは完全に独立しているため、相互間のデータは共有されません。コンポーネント間でデータを共有したい場合は、コンポーネント間の通信を実装する必要があります。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

コンポーネント間の通信

• ##親コンポーネントから子コンポーネントへの通信

##サブコンポーネントは親コンポーネントと通信します
ng6 コンポーネント間の通信を実現するために、スループットが提供されます: 入力、出力

親コンポーネントは子コンポーネントと通信します#ng6 は ts に基づいて実装されているため、通信データは型を定義する必要があります (内部構造の理解、メモリ領域の割り当て)

親コンポーネントは子コンポーネントと通信します。 コンポーネント通信では、サブコンポーネントが受信側となるため、入力スループットが使用されます。

#親コンポーネントからサブコンポーネントへの通信は、次のように分割されます。 6 つのステップ

最初のステップ 親コンポーネント テンプレートで、データを子コンポーネントに渡します。データが動的に可変である場合は、[] 構文のシュガー

を使用できます。

2 番目のステップ データ モデル クラスを定義します (データが非常に単純な場合は、このステップを省略できます)

ng ディレクティブを使用してモデル クラスを定義することもできます

ng class 类名

モデル クラスの命名規則: .model.ts ファイルとして定義できます。ファイルを models ディレクトリに直接配置し、.ts ファイルとして定義することもできます。

3 番目のステップ

サブコンポーネントにモデル クラスを導入します

4 番目のステップ ステップ サブコンポーネントで、スループット入力を導入します

5 番目のステップ スループットを通じてデータを受信するには 2 つの方法があります

最初の方法は、入力スループット アノテーション クラスを通じてデータを受信することです。

• @Input() 数据名称: 模型类;

2 番目の方法は、アノテーション メタ情報を通じてデータを受信することですコンポーネントの入力

• アノテーション クラス内: 入力:

  [属性データ]

コンポーネント内: 属性データ: モデルclass;

ステップ 6 データを使用する: データはコンポーネント自体に追加されるため、コンポーネントまたはテンプレートのどちらでも使用できます。 #例:

// 4 引入吞吐器
import { Component, OnInit, Input } from '@angular/core';
// 3 引入模型类
import { Data } from '../../models/data';
@Component({
    selector: 'app-inputs',
    templateUrl: './inputs.component.html',
    styleUrls: ['./inputs.component.css'],
    // 5 通过元信息接收
    inputs: ['color', 'data']
})
export class InputsComponent implements OnInit {
    // 5 接收数据
    // @Input() data: Data;
    // @Input() color: string;
    // 声明类型
    data: Data;
    color: string;
    constructor() {
        // 6 组件中使用
        console.log(this)
    }
    ngOnInit() {
    }
}

子コンポーネントと親コンポーネント間の通信

子コンポーネントと親コンポーネント間の通信は、カスタム イベントに基づいています。サブコンポーネントの場合はパブリッシャーであるため、Ouput スループットを使用します。サブコンポーネントと親コンポーネント間の通信を実装するには 6 つの手順があります

最初のステップ

親コンポーネント テンプレートで、DOM イベントをシミュレートし、親コンポーネント メソッドを子コンポーネント要素にバインドし、() 構文シュガーを使用します。 例: (demo)="dealDemo($event) "

データを渡すために、$eventを追加します。

2番目のステップ

サブコンポーネントに、スループットの出力を導入します。

3番目のステップステップ

サブコンポーネントで、EventEmitter イベント モジュールを導入します#ステップ 4

サブコンポーネントのイベント オブジェクトを作成するには 2 つの方法があります

##最初の方法は出力スループットを介して登録します

@Output() 属性名称 = new EventEmitter()

2 番目のタイプは、アノテーションのメタ情報出力を通じて受信することもできます
アノテーションで、属性の出力を登録します。

[属性名]

• コンポーネントで、イベント オブジェクトを作成します。

  属性名 = new EventEmitter()

ステップ 5 子コンポーネントで、イベント オブジェクトの Emit メソッドを通じてメッセージをパブリッシュします。パラメータは渡されたデータです。

ステップ 6 親コンポーネントで、親コンポーネント メソッドを介して受信しますサブコンポーネントによって渡されるデータ

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
@Component({
    selector: 'app-outputs',
    templateUrl: './outputs.component.html',
    styleUrls: ['./outputs.component.css'],
    // 元信息注册事件对象
    outputs: ['sendMessage']
})
export class OutputsComponent implements OnInit {
    // 4 注册事件对象
    // @Output() sendMessage = new EventEmitter();
    // 实例化
    sendMessage = new EventEmitter();
    constructor() { }
    ngOnInit() {
    }
    // 事件回调函数
    demo() {
        // console.log(111, this)
        // 5 点击按钮的时候，向父组件发布消息
        this.sendMessage.emit({
            msg: 'hello菜鸟',
            color: 'red'
        })
    }
}

プログラミング関連の知識の詳細については、プログラミング入門を参照してください。 ！

以上がAngular の親コンポーネントと子コンポーネントの間で通信する方法についての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。