Búsqueda de sitios web

typescript - Acceder a los datos de la ruta principal de Angular desde los hijos

Me gustaría tener los mismos datos en las rutas hijas, pero no puedo encontrar una forma de acceder a los datos de la ruta principal. Es decir, ahora tengo:

{ path: 'parent-path', component: parentComponent, children: [
    { path: 'child1', component: child1Component,
      data: { sharedData: 'sharedData', child1Data: 'child1Data' }},
    { path: 'child2', component: child2Component,
      data: { sharedData: 'sharedData', child2Data: 'child2Data' }},
    { path: 'child3', component: child3Component,
      data: { sharedData: 'sharedData', child3Data: 'child3Data' }}          
]}

Lo que quiero es no tener que repetir los mismos sharedData en todos los hijos. Intenté esto:

{ path: 'parent-path', data: { sharedData: 'sharedData'}, component: 
  parentComponent, children: [
    { path: 'child1', component: child1Component,
      data: { child1Data: 'child1Data' }},
    { path: 'child2', component: child2Component,
      data: { child2Data: 'child2Data' }},
    { path: 'child3', component: child3Component,
      data: { child3Data: 'child3Data' }}          
]}

Pero, de esta manera, en cada componente solo tengo sus propios datos (childXData).

¿Cómo podría acceder a los datos de la ruta padre desde los hijos?

Respuesta #1

En un hijo puedes inyectar ActivatedRoute (route: ActivatedRoute) y luego puedes hacer: route.parent.snapshot.data['sharedData'] o sin snapshot si necesitas un observable.

Artículos relacionados