tengo la siguiente estructura de componentes
Entonces mi enrutamiento se ve así:
const childroutes = [ { path: '', children: [ { path: 'edit', component: EditProjectComponent}, { path: 'subres1', component: Subres1Component}, { path: 'subres2', component: Subres2Component}, { path: 'subres3', component: Subres3Component}, { path: 'subres4', component: Subres4Component} ] } ] { path: 'project/:projectId', component: ProjectDetailComponent, children: childroutes, resolve: { project: ProjectResolver} /** resolve Project from ProjectService **/ }Como puede ver, resuelvo mis datos de proyecto desde un servicio y puedo acceder a ellos en ProjectDetailComponent a través de
this.route.snapshot.dataEntonces, ahora la pregunta es, ¿cómo puedo pasar los datos resueltos en "EditProjectComponent" a todos sus componentes childroutes?
Ahora que podría hacer lo siguiente para resolver los datos del proyecto en componentes secundarios:
const childroutes = [ { path: '', children: [ { path: 'edit', component: EditProjectComponent,resolve: { project: ProjectResolver}}, { path: 'subres1', component: Subres1Component,resolve: { project: ProjectResolver}}, { path: 'subres2', component: Subres2Component,resolve: { project: ProjectResolver}}, { path: 'subres3', component: Subres3Component,resolve: { project: ProjectResolver}}, { path: 'subres4', component: Subres4Component,resolve: { project: ProjectResolver}} ] } ]Pero esto parece feo e incorrecto.
Tienes dos opciones aquí:
1. Puede acceder a los datos de resolución de los padres a través del resolver del niño creando un resolver específico del niño y accediendo a la propiedad principal de la ruta.
[...módulo.ts | ... componente.ts]
{ path: 'project/:projectId', component: ProjectDetailComponent, resolve: { project: ProjectResolver } children: [ { path: ':projectId/edit', component: EditProjectComponent, resolve: { edit: EditProjectResolve } } ] }edit-project-component.ts
ngOnInit() { this.edit = this.route.snapshot.data.edit; }2. Puede omitir la resolución del hijo por completo y acceder a los datos principales desde el componente secundario.
[...módulo.ts | ... componente.ts]
{ path: 'project/:projectId', component: ProjectDetailComponent, resolve: { project: ProjectResolver } children: [ { path: ':projectId/edit', component: EditProjectComponent } ] }edit-project-component.ts
ngOnInit() { this.route.parent.data .subscribe((data) => { this.edit = data.edit; }); }Solo necesita hacer esto en componentes secundarios:
ngOnInit() { this.route.parent.data .subscribe((data) => { this.edit = data.edit; }); }