Un article expliquant en détail comment transférer des données entre les composants Angular parent et enfant

Cet article vous présentera la méthode de transmission de données entre les composants parent et enfant angulaires (Composant). Il présentera la méthode de transmission des données du composant parent au composant enfant et celle du composant enfant au composant parent dans Angular. soyez utile à tout le monde!

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

La chose la plus importante pour transmettre des données entre les composants est de transmettre des données entre les composants parent et enfant. Par exemple :

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

Le composant parent transmet les données au composant enfant en même temps, lorsque l'enfant. modifications des données du composant, j'espère être informé du composant parent. Dans

Angular, @Input() et @Output() permettent aux composants enfants de communiquer avec leurs composants parents. @Input() permet aux composants parents de mettre à jour les données des composants enfants. En revanche, @Output() permet aux composants enfants d'envoyer des données aux composants parents.

Parent à enfant @Input()

1. Définition du composant enfant @Input()

Le décorateur @Input() dans le composant enfant signifie que la propriété peut obtenir la valeur de son composant parent. . [Recommandations de tutoriel associées : Tutoriel angulaire, Enseignement de la programmation]

Par exemple :

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

• Ajoutez la variable de décorateur @Input(), sauf que les données peuvent être transmises à partir du composant parent, une autre logique est la identique aux variables ordinaires ;

• Vous pouvez utiliser la variable message dans le code html du composant enfant, par exemple :

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

2 Le composant parent transmet la variable au composant enfant

. Lorsque le composant parent appelle le composant enfant, vous pouvez transmettre les variables du composant parent (telles que messageToChild) au composant enfantmessageToChild） 传递给子组件

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

子组件中，可以更改message这个传入的变量，但是其作用域只在子组件中，父组件拿不到更改后的结果。（如何传给父组件，请接着看）

子传父 @Output()

Angular通过事件（Event）来实现子组件通知父组件数据的改变，父组件需要订阅该事件。

1. 子组件定义@Output

子组件定义@Output

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代码中，增加一个处理上面事件的方法，例如

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

2、父组件的html中，订阅该事件。

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

事件绑定 (newItemEvent)='addItem($event)'rrreee

Dans le composant enfant, vous pouvez modifier le composant enfant. variable message, mais sa portée Uniquement dans les composants enfants, le composant parent ne peut pas obtenir les résultats modifiés. (Comment le transmettre au composant parent, veuillez lire la suite)

Passer de l'enfant au parent @Output()

• Angular utilise des événements pour informer le composant parent des modifications de données, et le composant parent doit s'abonner à l'événement.

• 1. Définition du sous-composant @Output

Définition du sous-composant @Output

rrreeeSubcomponent Lorsque les données changent, appelez simplement cette méthode addNewItem. Par exemple, en html rrreee

🎜🎜2. Le composant parent s'abonne à l'événement 🎜🎜🎜🎜1 Dans le code ts du composant parent, ajoutez une méthode pour gérer l'événement ci-dessus, telle que 🎜rrreee🎜2. Dans le code HTML du composant parent, abonnez-vous à l'événement event. 🎜rrreee🎜La liaison d'événement (newItemEvent)='addItem($event)' connectera l'événement newItemEvent du composant enfant à la méthode addItem() du composant parent. 🎜🎜Résumé🎜🎜🎜🎜L'utilisation de @Input() et @Output() peut facilement réaliser le transfert et le partage de données entre les composants parents et enfants. 🎜🎜🎜🎜Vous pouvez utiliser @Input() et @Output() en même temps🎜🎜🎜🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Vidéo de programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!