Une brève discussion sur la façon de transférer des données entre les composants parent et enfant dans Angular

Cet article vous présentera la méthode de transfert de données entre les composants parent et enfant dans Angular. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Environnement :

• CLI angulaire : 11.0.6
• Angulaire : 11.0.7
• Nœud : 12.18.3
• npm : 6.14.6
• IDE : Visual Studio Code

Résumé1.

Pour transférer des données entre composants, le plus important est de transférer 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 les données du composant enfant changent, vous souhaitez pouvoir avertir le 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. [Tutoriels associés recommandés : "tutoriel angulaire"]

2 De père en fils @Input()

. 2.1 . Définition du sous-composant @Input()

Le décorateur @Input() dans un sous-composant indique que la propriété peut obtenir la valeur de son composant parent.

Par exemple :

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

1. Ajoutez les variables du décorateur @Input() Sauf que les données peuvent être transmises à partir du composant parent, les autres logiques sont les mêmes que les variables ordinaires ;

2. Dans le code html du composant enfant, vous pouvez utiliser la variable message, par exemple :

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

2.2 Le composant parent passe 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 enfant

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

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

3. Transmettez l'enfant au parent @Output()

Angular implémente le enfant via des événements (Événement) Le composant informe le composant parent des modifications de données et le composant parent doit s'abonner à l'événement.

3.1. Définition du sous-composant @Output

Définition du sous-composant @Output

export class ChildComponent {

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

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

sous-composant lorsque les données changent, appelez simplement ceci addNewItem méthode. Par exemple, en HTML

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

3.2. Le composant parent s'abonne aux événements

1 Dans le code ts du composant parent, ajoutez un. fonction pour gérer les méthodes d'événement ci-dessus, telles que

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

2, abonnez-vous à cet événement dans le html du composant parent.

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

La liaison d'événement (newItemEvent)='addItem($event)' connectera l'événement newItemEvent du composant enfant à la méthode addItem() du composant parent.

4. Résumé

• L'utilisation de @Input() et @Output() peut facilement réaliser un transfert de données entre les composants parent et enfant partagés.

• Vous pouvez utiliser @Input() et @Output() en même temps

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la 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!