web-dev-qa-db-fra.com

Comment obtenir: id param de la route enfant à partir du composant parent dans Angular2

J'essaie d'obtenir le paramètre id défini dans 

RouterModule.forRoot([
  {
    path: 'orders',
    component: ListComponent,
    children: [
      {
        path: 'view/:id',
        component: ViewComponent
      },
    ]
  }
])

de ListComponent.

J'ai déjà essayé:

route: ActivatedRoute

route.params.subscribe(params => {
  let id = +params['id'];
})

de ListComponent, mais le tableau params est vide, je suppose que c'est parce que le paramètre: id appartient à viewComponent pas à listComponent

Comment puis-je obtenir le paramètre id dans listComponent?

angularroutes
16
Fernando Popoca Ortiz

Vous pouvez utiliser la propriété firstChild ou la ActivatedRoute pour obtenir la route enfant:

route.firstChild.snapshot.params['id']
21
Günter Zöchbauer

Pour obtenir les paramètres de l'enfant dans le composant parent, j'ai utilisé la propriété firstChild de ActivatedRoute, car je n'ai que sur la route enfant.

route: ActivatedRoute

route.firstChild.params.subscribe(params => {
  let id = +params['id'];
});
10
Fernando Popoca Ortiz

Trouver récursivement des paramètres enfants ne vous donnera pas toujours les paramètres que vous recherchez. Spécialement lors du déplacement de routes. 

Au lieu de cela, une RxJS ReplaySubject peut être utilisée pour publier l'ID enfant actuel.

Créer un nouveau service:

@Injectable()
export class ChildIdService  {
  current$ = new ReplaySubject<number>();
}

Importez-le sur le composant enfant et abonnez-vous au sujet de la relecture:

export class ChildComponent implements OnInit {
  constructor(private ar: ActivatedRoute, public ci: ChildIdService){}

  ngOnInit(){
    this.ar.params.map(params => +params.id).subscribe(this.ci.current$);
  }
}

Importez le service sur le composant parent et utilisez le canal asynchrone pour vous abonner à la valeur enfant:

<span>Mother component child ID: {{ci.current$ | async}}</span>

Voici un extrait fonctionnel: https://stackblitz.com/edit/angular-b8xome (ajoutez/child/42 à l'aperçu de l'application du navigateur pour le voir fonctionner)

Vous pouvez également définir les composants en tant que frères et soeurs et ajouter le parent en tant que route sans composant, par exemple: https://vsavkin.com/the-powerful-url-matching-engine-of-angular-router-775dad593b03 under Composants utilisant les mêmes données "

2
golfadas

Vous pouvez continuer à chercher dans le route.firstChild.params['id'] s'il n'y a qu'un itinéraire enfant ou utiliser quelque chose comme route.children[0].children[1].params['id'] pour creuser à travers plusieurs niveaux en utilisant la notation entre crochets pour accéder aux itinéraires frères. C'est un peu des essais et des erreurs lorsqu'il s'agit de trouver le bon niveau. 

0
run yards