Interaction entre les composants

Dans cette leçon, vous apprendrez comment les composants communiquent dans Angular, en particulier les composants parents et enfants.

Interaction parent-enfant

Les composants doivent souvent partager des données. Les composants parents peuvent transmettre des données aux composants enfants à l’aide de propriétés d’entrée.

Utiliser @Input()

Utilisez le décorateur @Input() pour recevoir des données d’un composant parent :

@Input() userData: string;

Transmettre des données à l’enfant

Dans le modèle de votre composant parent, transmettez les données à l’aide de la liaison de propriété :

<app-child [userData]="parentData"></app-child>

Communication enfant-parent

Les composants enfants communiquent vers le parent au moyen d’événements avec le décorateur @Output().

Utiliser @Output()

Créez un émetteur d’événements pour envoyer des données de l’enfant au parent :

@Output() dataEvent = new EventEmitter<string>();

Émettre des événements

Émettez des événements depuis le composant enfant :

sendData() {
  this.dataEvent.emit('Hello from Child');
}

Écouter les événements dans le parent

Gérez les événements émis dans le modèle du composant parent :

<app-child (dataEvent)="handleEvent($event)"></app-child>

Résumé

Vous comprenez maintenant comment les composants peuvent interagir au moyen des entrées et des sorties dans Angular. Continuez à pratiquer !