Outlets con nombre

Cada hueco de la pantalla es un <router-outlet> con nombre. La URL guarda el estado de los tres a la vez.

1. Abre y cierra cada outlet

Outlets

Todos

2. La URL es el estado

Escribe una URL a mano y pulsa Ir. Prueba /(izquierda:menu//derecha:noexiste).

3. La pantalla

4. El código que lo produce

app.routes.ts

{ path: 'encabezado', component: Encabezado, outlet: 'arriba' },{ path: 'menu', component: Menu, outlet: 'izquierda' },{ path: 'ayuda', component: Ayuda, outlet: 'derecha' },

app.html

<router-outlet name="arriba" /><router-outlet name="izquierda" /><router-outlet name="derecha" />

El enlace que abre un outlet (y deja los otros como están)

[routerLink]="[{ outlets: { arriba: ['encabezado'] } }]"
[routerLink]="[{ outlets: { arriba: null } }]"   // cierra el outlet