Javascript Girl
  1. Javascript Girl
  3. L'enfant écoute l'événement parental dans Angular 2
Intereting Posts
SVG rendu dans une toile floue sur l'affichage de la rétine Effet oscillant de la barre de progression Comment désactiver le menu contextuel sur un clic droit / long sur un mode kiosque de Chrome? Téléchargement du fichier à partir du résultat ajax à l'aide de blob Format JSON pour la colonne Google Chart empilée Vérifiez si div est en train de déborder et / ou a une barre de défilement Comment exactement l'expression JavaScript ] analyse-t-elle? Le jargon d'analyse Javascript ignore les décimales après ma virgule La fonction "resizeTo" javascript ne fonctionne pas dans Chrome et Opera Puis-je utiliser les directives AngularJs pour appliquer un style à un élément pseudo Obtention du composant JSF avec Javascript Les diagrammes de flottes ont des problèmes d'axe de l'axe x … AARGHHH Passer le tableau de javascript au contrôleur MVC 4 Mélanger deux toiles sur un avec WebGL Notation angulaire des points meilleure explication

L'enfant écoute l'événement parental dans Angular 2

Dans les documents angulaires, il y a un sujet d'écoute des événements de l'enfant par les parents. C'est très bien. Mais mon but est quelque chose d'inverse! Dans mon application, il existe un «admin.component» qui contient la vue de mise en page de la page d'administration (menu de la barre latérale, barre des tâches, état etc.). Dans ce composant parent, j'ai configuré le système de routage pour modifier la vue principale entre les autres pages de l'administrateur. Le problème est de sauvegarder les choses après le changement, l'utilisateur clique sur le bouton Enregistrer dans la barre des tâches (placé dans admin.component) et le composant enfant doit écouter cet événement de clic pour faire enregistrer le personnel.

Je pense que ce document pourrait vous être utile:

En fait, vous pourriez tirer parti d'un sujet ou sujet observable que le parent fournit à ses enfants. Quelque chose comme ca: 

@Component({ (...) template: ` <child [parentSubject]="parentSubject"></child> `, directives: [ ChildComponent ] }) export class ParentComponent { parentSubject:Subject<any> = new Subject(); notifyChildren() { this.parentSubject.next('some value'); } }

Le composant enfant peut simplement s'abonner à ce sujet: 

 @Component({ (...) }) export class ChildComponent { @Input() parentSubject:Subject<any>; ngOnInit() { this.parentSubject.subscribe(event => { // called when the notifyChildren method is // called in the parent component }); } ngOnDestroy() { // needed if child gets re-created (eg on some model changes) // note that subsequent subscriptions on the same subject will fail // so the parent has to re-create parentSubject on changes this.parentSubject.unsubscribe(); } }

Sinon, vous pourriez tirer parti d'un service partagé contenant un tel sujet de manière similaire …

Pour la postérité, je pensais simplement mentionner la solution la plus conventionnelle : obtenez simplement une référence au ViewChild et appelez directement la méthode. 

 @Component({ selector: 'app-child' }) export class ChildComponent { notifyMe() { console.log('Event Fired'); } } @Component({ selector: 'app-parent', template: `<app-child></app-child>` }) export class ParentComponent { @ViewChild(ChildComponent) private child: ChildComponent; ngOnInit() { this.child.notifyMe(); } }