Interacción entre componentes

En esta lección, aprenderá cómo se comunican los componentes en Angular, especialmente los componentes principales y secundarios.

Los componentes a menudo necesitan compartir datos. Los componentes principales pueden pasar datos a los componentes secundarios mediante propiedades de entrada.

Use el decorador @Input() para recibir datos de un componente principal:

@Input() userData: string;

En la plantilla del componente principal, pase datos mediante la vinculación de propiedades:

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

Los componentes secundarios se comunican hacia arriba mediante eventos con el decorador @Output().

Cree un emisor de eventos para enviar datos del componente secundario al principal:

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

Emita eventos desde el componente secundario:

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

Gestione los eventos emitidos en la plantilla del componente principal:

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

Ahora comprende cómo pueden interactuar los componentes mediante entradas y salidas en Angular. ¡Siga practicando!