web-dev-qa-db-fra.com

Comment passer un événement d'un enfant imbriqué profond à un parent dans Angular 2?

J'ai un composant enfant imbriqué qui a un événement de sortie, je veux écouter cet événement à partir du composant parent mais je ne sais pas comment, j'ai 4 niveaux:

J'ai essayé de passer l'événement de l'enfant 3 à l'enfant 2 et de l'enfant 2 à l'enfant et au parent, mais je pense que ce n'est pas la meilleure façon.

-Parent (From this I want listen the event)
--Child
----Child 2
------Child 3 (This have the Event)
angulareventscomponentsparent-child
7
juanjinario

Bien que vous puissiez utiliser un @Output émetteur d'événements pour ce faire, je vous suggère de créer un service partagé à la place qui gérera les communications car il existe de nombreux niveaux d'imbrication.

Vous pouvez faire quelque chose comme ci-dessous et injecter le service dans vos deux composants. L'un émettra le message (votre composant enfant imbriqué) et l'autre écoutera les messages (votre composant de niveau supérieur).

Définissez votre service

@Injectable({
    providedIn: 'root'
})
export class CommunicationService {
    @Output() message$: EventEmitter<boolean> = new EventEmitter();

    sendMessage(message: String) {
        this.change.emit(message)
    }
}

Injectez-le dans vos composants

constructor(private communicationService: CommunicationService) { }

Dans le composant d'où vous enverrez le message

sendMessage() {
    this.communicationService.sendMessage('This is a message from deep below!');
}

Et dans votre composant écouteur, abonnez-vous à l'émetteur d'événements

ngOnInit() {
    this.communicationService.message$.subscribe(message => {
      console.log(message);
    });
}
1
Daniel B