Parlons de la façon de transférer des données entre les composants parent et enfant dans Angular

Comment transférer des données entre composants parent et enfant dans Angular ? L'article suivant vous 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. J'espère que cela vous sera utile !

Environnement :

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

Composants La chose la plus importante pour transférer des données entre les composants parent et enfant est de transférer les 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. , on espère que le composant parent pourra être notifié.

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"]

Père à enfant @Input()

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

@Input() décorateur dans le sous-composant Indique que la propriété peut obtenir sa valeur de son composant parent.

Par exemple :

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

• Ajoutez la variable décoratrice @Input() Sauf que les données peuvent être transmises à partir du composant parent, les autres logiques sont les mêmes que les variables ordinaires ; Code HTML de la variable de message du composant enfant, par exemple :

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

2. Le composant parent transmet les variables au composant enfant

Lorsque le composant parent appelle le composant enfant, vous pouvez transmettre les variables du composant parent. (tel que messageToChild ) Passé au composant enfant

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

Dans le composant enfant, la variable entrante message peut être modifiée, mais sa portée est uniquement dans le composant enfant , et le composant parent ne peut pas obtenir le résultat modifié. (Comment le transmettre au composant parent, veuillez lire la suite)

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通过事件（Event）来实现子组件通知父组件数据的改变，父组件需要订阅该事件。

1. 子组件定义@Output

子组件定义@Output

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

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

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

rrreee

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

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
rrreee

Subcomponent 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 dans le 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 liées à la programmation, veuillez visiter : 🎜Apprentissage en 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!