Angular で親コンポーネントと子コンポーネントの間でデータを転送する方法についての簡単な説明

この記事では、Angular で親コンポーネントと子コンポーネントの間でデータを転送する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

#環境:

Angular CLI: 11.0.6
• Angular: 11.0.7
• ノード: 12.18.3
• npm : 6.14.6
• IDE: Visual Studio コード

1.概要

コンポーネント間でデータを転送する際に最も重要なことは、親コンポーネントと子コンポーネントの間でデータを転送することです。例:

<parent-component>
  <child-component></child-component>
</parent-component>

親コンポーネントはデータを子コンポーネントに渡します。同時に、親コンポーネントはデータを子コンポーネントに渡します。 、子コンポーネントのデータが変更されたときに、親コンポーネントに通知できるようにしたい。

Angular では、@Input() と @Output() は、子コンポーネントが親コンポーネントと通信する方法を提供します。 @Input() を使用すると、親コンポーネントは子コンポーネントのデータを更新できます。対照的に、 @Output() を使用すると、子コンポーネントが親コンポーネントにデータを送信できます。 [関連チュートリアルの推奨事項: "

angular チュートリアル"]

2. 父から息子 @Input() への渡し

2.1 . サブコンポーネントの定義 @Input()

サブコンポーネントの @Input() デコレーターは、プロパティが親コンポーネントから値を取得できることを示します。

例:

export class ChildComponent {
  @Input() message: string;
}

1. @Input() デコレーターの変数を追加します。データが親コンポーネントから渡されることを除いて、他のロジックは通常の変数と同じです。

2. 子コンポーネントの HTML コードでは、メッセージ変数を使用できます (例:

<p>
  Parent says: {{message}}
</p>

2.2. 親コンポーネントは、変数を子コンポーネント

親コンポーネントが子コンポーネントを呼び出すと、親コンポーネントの変数 (

messageToChild など) を子コンポーネント

<child-component [message]="messageToChild"></child-component>

# に渡すことができます。

##子コンポーネントでは、

メッセージを変更できます。

この変数は渡されますが、そのスコープは子コンポーネント内のみであり、親コンポーネントは変更された結果を取得できません。 (親コンポーネントに渡す方法については、続きをお読みください)

3. 子を親に渡す @Output()

Angular は、イベントによる子 (Event) コンポーネントはデータ変更を親コンポーネントに通知します。親コンポーネントはイベントをサブスクライブする必要があります。

3.1. サブコンポーネント定義@出力サブコンポーネント定義@出力

export class ChildComponent {

  // EventEmitter ，这意味着它是一个事件
  // new EventEmitter<string>() - 
  // 使用 Angular 来创建一个新的事件发射器，它发出的数据是 string 类型的。
  @Output() newItemEvent = new EventEmitter<string>();

  addNewItem(value: string) {
    this.newItemEvent.emit(value);
  }
}

データが変更されたときは、これを # 呼び出してください。 ##addNewItem

メソッド。たとえば、HTML では

<label>Add an item: <input #newItem></label>
<button (click)="addNewItem(newItem.value)">Add to parent&#39;s list</button>

3.2. 親コンポーネントはイベントをサブスクライブします

1. 親コンポーネントの ts コードに、上記のイベントを処理する関数 親コンポーネントの HTML 内の

addItem(newItem: string) {
    // logic here
}

2 などのメソッドで、イベントをサブスクライブします。

<child-component (newItemEvent)="addItem($event)"></child-component>

イベント バインディング

(newItemEvent)='addItem($event)'

は、子コンポーネントの newItemEvent イベントを親コンポーネントの addItem() メソッドに接続します。

4. まとめ

@Input() と @Output() を使用すると、親コンポーネントと子コンポーネント間のデータ転送を簡単に実現できます。

• @Input() と @Output() を同時に使用できます

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

! ！

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