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

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

#環境:

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

angular チュートリアル"]

father-to-child@Input()

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

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

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

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

 Parent says: {{message}} 

ログイン後にコピー

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

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

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

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

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

export class ChildComponent { // EventEmitter ，这意味着它是一个事件 // new EventEmitter() - // 使用 Angular 来创建一个新的事件发射器，它发出的数据是 string 类型的。 @Output() newItemEvent = new EventEmitter(); addNewItem(value: string) { this.newItemEvent.emit(value); } }

addNewItemメソッド。たとえば、HTML

Add an item:  Add to parent's list

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

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

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

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

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

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

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