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() を使用すると、子コンポーネントが親コンポーネントにデータを送信できます。

#親から子@Input()

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

子コンポーネントの @Input() デコレータは、プロパティが親コンポーネントから値を取得できることを示します。 [関連チュートリアルの推奨事項:

angular チュートリアル、プログラミング教育]

例:

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

• Add @Input()装飾 親コンポーネントから渡せるデータ以外のロジックは通常の変数と同様です;

• 子コンポーネントのHTMLコードでは、メッセージ

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

2. 親コンポーネントが子コンポーネントに変数を渡す場合、##

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

変数を使用できます。親コンポーネントは子コンポーネントを呼び出します。親コンポーネントは、コンポーネント変数 (messageToChild

など) をサブコンポーネントに渡します。

export class ChildComponent {

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

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

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

子から親に渡す @Output()

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

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

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

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

データが変更されたときのサブコンポーネントは、これを呼び出すだけです。 addNewItem メソッド。たとえば、HTML

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

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

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

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

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

rrreee

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

概要

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

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

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

プログラミングビデオ

! ！

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