route - Cómo obtener: ID param de la ruta secundaria del componente principal en Angular2

router events angular 6

Question

Estoy tratando de obtener el: id param definido en

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

de ListComponent.

Ya lo intento

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

de ListComponent, pero la matriz params está vacía, supongo que se debe a que el parámetro: id pertenece a viewComponent no a listComponent

¿Cómo puedo obtener el ID de param en listComponent?

Answer 1

La búsqueda recurrente de parámetros de niños no siempre le proporciona los parámetros que está buscando. Especialmente cuando se mueven rutas alrededor.

En su lugar, se puede usar RxJS ReplaySubject para publicar el ID de hijo actual.

Crea un nuevo servicio:

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

Importarlo en el componente hijo y suscribirse al tema de reproducción:

export class ChildComponent implements OnInit {
constructor(private ar: ActivatedRoute, public ci: ChildIdService){}
ngOnInit(){
this.ar.params.map(params => +params.id).subscribe(this.ci.current$);
}
}

Importe el servicio en el componente principal y use el conducto asíncrono para suscribirse al valor secundario:

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

Aquí hay un fragmento de trabajo: https://stackblitz.com/edit/angular-b8xome (agregue / child / 42 a la vista previa de la aplicación del navegador para verlo funcionar)

Alternativamente, defina los componentes como hermanos y agregue el padre como una ruta sin componentes, ej .: https://vsavkin.com/the-powerful-url-matching-engine-of-angular-router-775dad593b03 en "Componentes de hermanos usando los mismos datos "

Answer 2

Para obtener los parámetros del niño dentro del componente principal, usé la propiedad firstChild de ActivatedRoute, porque solo tengo en la ruta secundaria

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

Answer 3

Puede seguir cavando a través de route.firstChild.params[''id''] si solo hay una ruta secundaria o usar algo como route.children[0].children[1].params[''id''] para cavar a través de múltiples niveles usando notación de corchetes para acceder a las rutas de hermanos. Es un poco de prueba y error cuando se trata de encontrar el nivel correcto.

Answer 4

Puede usar la propiedad firstChild o ActivatedRoute para obtener la ruta secundaria:

route.firstChild.snapshot.params[''id'']