Question Comment appeler la méthode de composant enfant de sortie de routeur à partir de parent


Je suis nouveau à angular2

<parent>
<router outlet><router outlet>
</parent>

J'ai un bouton dans le composant parent, si je clique sur ce bouton, il doit appeler la méthode dans le composant enfant (qui est chargé dans la prise du routeur).

Existe-t-il un moyen d'appeler la méthode du composant enfant (dans la prise du routeur) à partir du parent.


13
2017-08-29 22:59


origine


Réponses:


Il existe essentiellement deux façons d'afficher le modèle d'un composant: en tant que composant imbriqué ou en tant que cible de routage.

Composant imbriqué

Si vous utilisez un composant imbriqué, les composants sont considérés comme ayant une relation "composant parent / composant enfant".

Le code HTML du composant parent ressemblerait alors à ceci:

<div>
   <child></child>
</div>

Où "enfant" est le sélecteur du composant enfant. Vous pouvez ensuite communiquer entre les deux à l'aide des propriétés @Input et @Output.

Pour plus d'informations sur cette technique lorsque vous avez imbriqué composants, consultez les documents ici: https://angular.io/guide/component-interaction

Cible de routage

Si vous utilisez un composant comme cible de routage en l’affichant dans un <router-outlet>, alors il n'y a pas de relation "composant parent" et "composant enfant".

La meilleure façon de communiquer entre les composants dans ce cas est d'utiliser un service.

J'ai un article sur la création d'un service ici: https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

Ressources

Si vous êtes nouveau sur Angular, vous pouvez vous épargner beaucoup de temps et de frustration en suivant un didacticiel ou un cours en ligne. Cela introduira tous les concepts de base pour vous mettre rapidement en route avec Angular.

Vous pouvez parcourir le tutoriel "Tour of Heroes" ici: https://angular.io/tutorial 

Ou regardez un cours comme celui-ci: https://app.pluralsight.com/library/courses/angular-2-getting-started-update

Ou celui-ci: https://app.pluralsight.com/library/courses/angular-2-first-look/table-of-contents

(Vous pouvez vous inscrire pour une semaine gratuite.)


7
2017-08-29 23:07



Avec enfant router-outlet, vous pouvez utiliser ContentChild pouvoir appeler une méthode chez l'enfant. Alors...

import { ContentChild } from '@angular/core';

chez votre parent:

@ContentChild(ChildComponent)
private childComponent: ChildComponent;

et sur votre événement click cliquez sur:

this.childComponent.doSomething()

Vous devez également ajouter votre composant enfant dans le tableau de fournisseurs de parent:

@Component({
  selector: 'parent',
  ...
  providers: [ChildComponent]
})

5
2017-09-02 12:46



J'ai trouvé deux moyens d'y parvenir:

1. Injecter le composant principal dans les enfants

Vous pouvez ajouter un événement à votre composant principal, injecter le composant principal dans vos composants enfants et vous abonner à l'événement. Voir le plunk cela illustre cela. Mais maintenant, vos enfants dépendent de votre composant principal. Cela peut ne pas être bon.

composant principal

executeAction: EventEmitter<any> = new EventEmitter();
constructor() { }
performAction() {
  this.executeAction.emit();
}

enfant

constructor(private appComponent: AppComponent) {
    this.executeAction = this.executeAction.bind(this);
    eventSubscriber(appComponent.executeAction, this.executeAction);
}
ngOnDestroy(): void {
    eventSubscriber(this.appComponent.executeAction, this.executeAction, true);
}
executeAction() {
    alert('1');
}

2. Mettre en place un service

La meilleure solution ici et comme décrit dans Parent et enfants communiquent via un service est de créer un service qui constituera une couche supplémentaire entre le composant principal et les enfants. De cette façon, vous serez indépendant de l'implémentation du composant principal. Voir le plunkcela illustre cette approche.

un service

subscription = new Subject();
executeAction() {
    this.subscription.next();
}

composant principal

constructor(private appService: AppService) { }
performAction() {
  this.appService.executeAction();
}

enfant

constructor(private appService: AppService) {
    this.executeAction = this.executeAction.bind(this);
    eventSubscriber(appService.subscription, this.executeAction);
}
ngOnDestroy(): void {
    eventSubscriber(this.appService.subscription, this.executeAction, true);
}
executeAction() {
    alert('1');
}

4
2017-08-31 00:28



je pense Émetteur d'événements peut faire le tour pour vous

Bien que vous puissiez l'utiliser directement dans la composante enfant, utiliser un service commun serait une bonne pratique

Vous devez d'abord créer un émetteur dans un service comme

export class EmitterService {
   public nameEmitter:EventEmitter<string>=new EventEmitter(); 

    //method to get question
    changeName(name:string){   
        this.nameEmitter.emit(name)    
    }

}

Ensuite, dans le composant racine, injecter la dépendance de service et appeler la méthode de changement de nom pour émettre le changement

 constructor(private emitter :EmitterService) {}
 this.emitter.changeName("New Name");

Et à la fin du composant enfant, abonnez-vous aux modifications

this.emitter.nameEmitter.subscribe(name=>{this.name=name})

Ici travaille plongeur


1
2017-09-27 07:06



Vous pouvez utiliser un service partagé pour communiquer avec les composants ajoutés par le routeur.

Vous pouvez également utiliser le activer l'événement de la sortie du routeur pour que le parent sache quand un composant a été ajouté par le routeur

Modèle

<router-outlet (activate)="onActivate($event)"></router-outlet>

Composant

  onActivate(componentRef){
    componentRef.works();
  }

Comp enfant

 works(){
    console.log("works");
  }

1
2017-09-28 08:19



Il existe deux manières d'appeler la méthode du composant enfant de la sortie du routeur à partir du composant parent.

  1. ViewChild / ViewChildren - Vous pouvez utiliser ViewChild / ViewChildren pour obtenir le ou les éléments ou la ou les directives correspondant au sélecteur depuis la vue DOM. Peu importe que le composant enfant soit rendu par la sortie du routeur.

    import {ViewChild} depuis '@ angular / core'; @ViewChild (HomeComponent) childComponent privé: HomeComponent;

Ensuite, vous pouvez appeler n'importe quelle méthode,

this.childComponent.changeTitle();

Démo - méthode composant enfant

  1. Services partagés - Puisque les services angulaires sont singleton en les injectant dans vos contrôleurs, vous pouvez appeler des méthodes. (Les réponses ci-dessus sont déjà mentionnées dans cette approche)

0
2017-09-29 05:33