Tengo una situación en Angular 4.0.3 donde tengo dos <router-outlet> en una página.
<router-outlet></router-outlet> <router-outlet name="nav"></router-outlet>El primer punto de venta aceptará rutas para el contenido y el segundo aceptará rutas para la navegación. Logro la navegación usando esto;
router.navigate(['', {outlets: { nav: [route] } }],{skipLocationChange: true }); Esto cambia el contenido del punto de venta sin actualizar la URL, ya que no quiero ninguna url que se parezca a .. (nav:user) .
El problema es la salida restante. Quiero que la URL se actualice cuando se haga clic en ellos, por ejemplo...
.../user/profile Funcionalmente, puedo hacer que ambos puntos de venta tengan el contenido adecuado, pero sigue agregando la ruta de la salida de nav a la URL, así...
.../user/profile(nav:user) ¿Hay alguna forma de evitar que agregue la parte (nav:user) ?
A menos que haya algún truco que desconozco... No creo que puedas. La barra de direcciones es lo que mantiene el estado de la ruta. Entonces, sin la información de salida secundaria en la barra de direcciones, el enrutador no sabrá cómo mantener el componente enrutado correcto en la salida secundaria.
Puede intentar anular el método de navigateByUrl como se muestra aquí: http://plnkr.co/edit/78Hp5OcEzN1jj2N20XHT?p=preview
export class AppModule { constructor(router: Router) { const navigateByUrl = router.navigateByUrl; router.navigateByUrl = function(url: string|UrlTree, extras: NavigationExtras = {skipLocationChange: false}): Promise<boolean> { return navigateByUrl.call(router, url, { ...extras, skipLocationChange: true }); } } }Potencialmente, podría agregar lógica aquí para verificar en qué rutas necesita hacer esto.