Javascript Girl
  1. Javascript Girl
  3. Le composant Angular 2 enfant reçoit un événement ancêtre
Intereting Posts
Paramètre de passage de Javascript vers rappel ou Définir la valeur de variable dans DistanceMatrixStatus Javascript: fonction qui tente avec setTimeout Comment télécharger des fichiers en utilisant nodejs et HAPI? JQuery – changement pour l'élément à cliqueter, pas tous avec la même classe Extension Chrome: erreur lors de l'envoi du message du script injecté au script en arrière-plan Comment restreindre l'API AJAX contre une utilisation indésirable (p. Ex., Quelqu'un qui effectue un SELECT *) Comment accéder à jQuery en HTML 5 web worker Supprimer Facebook OAuth hash avec Angular JS For loop through Array affiche uniquement la dernière valeur Comment attraper un événement de changement d'état ONCE avec history.js? Comment changer l'image du marqueur dans une carte google Le getDate de JavaScript renvoie une mauvaise date Qu'est-ce que $ signifie ici dans JQuery Window.open + Mobile Devices + Canvas == Ne fonctionne pas? Itérer la réponse JSON avec jQuery pour Highcharts

Le composant Angular 2 enfant reçoit un événement ancêtre

J'ai un composant Angulaire qui dépend d'un événement de clic qui se produit sur le composant de l'application racine. L'enfant est situé dans des endroits aléatoires dans le composant <app> , donc pourquoi je ne l'ai pas mentionné. 

 @Component({ template: '<div>Child!</div>' }) export class Child { constructor () {} } @Component({ selector: 'app', template: '<div (click)=foo()></div>' }) export class App { rootClickEmitter = new EventEmitter(); foo () { this.rootClickEmitter.emit('bar'); } }

Comment puis-je que le composant enfant reçoive l'événement rootClickEmitter ?

Pour "cliquer à l'extérieur", essayez ceci: 

 @Component({ selector: 'child', template: '<div (click)="childClick($event)">child content here</div>', host: { '(document:click)': 'docClick()' } }) export class Child { docClick() { console.log('clicked outside'); } childClick(ev) { console.log('child click'); ev.stopPropagation(); } }

Plunker

Mise à jour: Eric a simplement posté ce qui suit dans une autre réponse :

"Vous pouvez utiliser listenGlobal qui vous donnera accès au document, au corps, etc. 

 renderer.listenGlobal('document', 'click', () => { console.log('Document clicked'); });