LO QUE ME PRETENDO LOGRAR:

Quiero hacer una aplicación de una sola página con tres columnas en una página. Cada columna es un componente y debe mostrar datos de acuerdo con la URL (parámetros dinámicos). La relación entre los datos es jerárquica de izquierda a derecha. Entonces, si el usuario hace clic en un elemento de la columna izquierda, los datos en las otras columnas deben cambiar en consecuencia. La selección debe reflejarse en la ULR para que un usuario pueda guardar una selección específica o enviarla a otros. Aquí un diseño rápido para que esto sea más fácil de entender:

PROBLEMA

Me cuesta estructurar la aplicación/plantilla para que esto funcione. En este StackBlitz, intenté anidar las salidas del enrutador, pero no puedo diseñar las tarjetas correctamente. https://stackblitz.com/edit/angular-ivy-uh3636?file=src%2Fapp%2Flayout%2Fget-data.service.ts,src%2Fapp%2Flayout%2Flayout.component.css

El resultado se ve así cuando todo está seleccionado:

"Hijos de la cosa seleccionada" debe estar en el medio y "Detalle del hijo seleccionado" debe estar a la derecha. Cuando aún no se ha seleccionado nada, se puede ver el texto alternativo de la segunda columna, pero sin estilos de la tarjeta. La tercera columna es invisible hasta que se selecciona un elemento de la segunda columna.

Además, cuando selecciono un elemento nuevo en la primera columna, la segunda columna no reacciona al parámetro de URL modificado, pero la tercera sí.

Como un enfoque alternativo, ya intenté usar salidas de enrutador con nombre en un componente de diseño. Aunque el estilo funcionó mejor con este enfoque, enfrenté otros problemas más graves, por ejemplo, la navegación.

Agradecería cualquier ayuda o consejo al respecto.