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?
Vous pouvez utiliser la propriété firstChild
ou la ActivatedRoute
pour obtenir la route enfant:
route.firstChild.snapshot.params['id']
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'];
});
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 "
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.