Angular で親コンポーネントと子コンポーネントの間でデータを転送する方法について話しましょう

Angular で親コンポーネントと子コンポーネント間でデータを転送するにはどうすればよいですか?次の記事では、Angular の親コンポーネントから子コンポーネントにデータを送信する方法、および子コンポーネントから親コンポーネントにデータを送信する方法について説明します。

#環境:

Angular CLI: 11.0.6
• Angular: 11.0.7
• Node: 12.18.3
• npm : 6.14.6
• IDE: Visual Studio Code

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

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

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

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

angular チュートリアル"]

father-to-child@Input()

1 . 子コンポーネントの定義 @Input()

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

例:

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

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

• サブコンポーネントの HTML コードでは、メッセージ変数を使用できます。例:

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

2. 親コンポーネントから子コンポーネントに渡される変数

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

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

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

に渡すことができます。子コンポーネントでは、変数に渡される

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

子から親に渡す @Output()

Angular はイベントを使用して、データの変更を親コンポーネントに通知します。親コンポーネントはこのイベントをサブスクライブする必要があります。

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>

2 では、親コンポーネントはイベント

#1 をサブスクライブします。親コンポーネントの ts コードでは、次のようになります。上記のイベントを処理する関数を追加し、親コンポーネントの HTML にある

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

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

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

イベント バインディング

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

概要

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

##@Input() と @Output() は同時に使用できます

• ##プログラミング関連の知識については、次のサイトを参照してください。
プログラミング学習

! ！

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