named ui-view (multiple views) en Angular moderno

Las vistas que siempre aparecen juntas pasan a ser un componente de layout que coloca las partes fijas directamente en su template. Los router outlets con nombre existen para regiones que navegan por su cuenta.

$stateProvider.state('mail', {
  url: '/mail',
  views: {
    '': { component: 'mailList' },
    'sidebar': { component: 'mailFolders' },
    'toolbar': { component: 'mailToolbar' }
  }
});

<div ui-view="toolbar"></div>
<div ui-view="sidebar"></div>
<div ui-view></div>

@Component({
  selector: 'app-mail-layout',
  imports: [RouterOutlet, MailToolbarComponent, MailFoldersComponent],
  template: `
    <app-mail-toolbar />
    <app-mail-folders />
    <router-outlet />
  `,
})
export class MailLayoutComponent {}

// routes
{ path: 'mail', component: MailLayoutComponent, children: [
  { path: '', component: MailListComponent },
] }

Qué cambia

• Las regiones fijas, como barras de herramientas y menús laterales, pasan a ser componentes hijos normales del layout; solo la región que cambia usa router-outlet.
• Un outlet con nombre se declara con <router-outlet name="preview" /> y lo llena una ruta con outlet: 'preview'.
• Cada outlet con nombre tiene su propio segmento en la URL, escrito entre paréntesis, y se navega de forma independiente del outlet principal.

Relacionado

• $urlRouterProvider.otherwise / redirectTo
• ngRoute ($routeProvider, ng-view)
• lazy loaded states (ocLazyLoad, future states)
• abstract states and nested views