Estoy usando rutas de navegación secundarias en Angular 2 (a veces conocidas como rutas auxiliares) para administrar lo que se muestra en mis barras laterales izquierda y derecha. Este parece ser el enfoque correcto para mí, porque quiero que las barras laterales sean persistentes en todo el sitio, pero también quiero poder cambiar su contenido desde dentro de los componentes si es necesario (realizando una navegación secundaria).
Por ejemplo, es posible que desee agregar un botón "Editar" en la barra lateral izquierda cuando el usuario está viendo un artículo y ha iniciado sesión como editor. Podría hacer esto realizando una navegación secundaria en mi "Componente de detalle del artículo".
Sin embargo, no quiero que el enrutamiento de las barras laterales aparezca en la URL. Filtra detalles de implementación al usuario y desordena lo que de otro modo serían URL simples y memorables, sin agregar valor al usuario.
Entonces, ¿cómo oculto las rutas secundarias de la URL? ¿O estoy haciendo la pregunta equivocada, y mi enfoque de esto es fundamentalmente incorrecto de alguna manera?
Esto se puede lograr pasando un segundo objeto al comando de navegación cuando se realiza una navegación secundaria, por ejemplo
this._router.navigate( [{ outlets: { 'left-column': ['home'] }}], { skipLocationChange: true } );Sin embargo, hay una falla con este enfoque que aún no he resuelto. Cuando se produce la navegación principal (independientemente de cómo), cuando la navegación principal cambia la ubicación, la ruta secundaria se agrega a la URL. Este puede ser un problema que tendré que informar al equipo de Angular.
Use un enlace en su lugar, funciona bien.
<a [skipLocationChange]='true' [routerLink]="[{ outlets: { 'left-column': ['home'] }}]">Label</a> Consulte http://dynamo-t.firebaseapp.com
Actualmente, la aplicación se encuentra en etapa de construcción.
Me encontré con el hilo, mientras trataba de averiguar cómo resolver un problema similar. Así es como logré ocultar las rutas auxiliares de mis usuarios. Espero que esto ayude a quien se encuentre con este problema en el futuro.
Tengo dos salidas de enrutador en un contenedor html. Para la mayoría de las rutas, el contenido de la barra lateral debe ser una lista con información genérica. Sin embargo, cuando navego a la página que ya contiene esta información, deseo usar una barra lateral vacía predeterminada.
Use routeconfig ( routing.module.ts ) y declare ambos puntos de venta como rutas secundarias para el padre.
Esto da como resultado que la URL solo muestre la ruta 'principal', por lo que las rutas auxiliares están ocultas.
{ path: 'documents', children: [ { path: '', component: SidebarWithInformation, outlet: 'sidebar' }, { path: '', component: DocumentComponent, } ], }, { path: 'full-info', children: [ { path: '', component: AggregatedInfoComponent, }, { path: '', component: EmptySidebarComponent, outlet: 'sidebar' }, ] }