Múltiple nombrado router-salida angular 2
angular-routing (1)
Quiero mostrar diferentes vistas por rutas secundarias. Por ejemplo, quiero que mi plantilla contenga múltiples enrutadores
Version: @angular/router": "3.0.0-alpha.7"
<router-outlet></router-outlet>
<router-outlet name="route1"></router-outlet>
<router-outlet name="route2"></router-outlet>
En mi enrutador quiero especificar el nombre del enrutador.
Como vi en una pregunta, la solución para esto es especificar AuxRoute, pero AuxRoute no existe en esta versión.
{path: ''/'', component: HomeComponent, as: ''Home''},
new AuxRoute({path: ''/route1'', component: Route1Component, as: ''Route1''}),
new AuxRoute({path: ''/route2'', component: Route2Component, as: ''Route2''})
Mientras estaba en el sitio web oficial de angular 2 descubrí que es posible tener varios enrutadores, pero no puedo encontrar ningún recurso.
https://angular.io/docs/ts/latest/guide/router.html
A template may hold exactly one unnamed <router-outlet>. The router supports multiple named outlets, a feature we''ll cover in future.
La versión actual del
router-outlet
múltiple (para angular2
RC.6 ^
) se ve así:
Configuración del enrutador
const appRoutes: Routes = [{
path: ''home'',
component: HomeComponent,
children: [
{ path: '''', component: LayoutComponent },
{ path: ''page1'', component: Page1Component, outlet: ''route1'' },
{ path: ''page2'', component: Page2Component, outlet: ''route2'' },
{ path: ''page3'', component: Page3Component, outlet: ''route3'' }
]
}, {
path: ''articles'',
component: ArticlesComponent,
children: [
{ path: '''', component: LayoutComponent },
{ path: ''article1'', component: Article1Component, outlet: ''route1'' },
{ path: ''article2'', component: Article2Component, outlet: ''route2'' }
]
}, {
path: '''',
redirectTo: ''/home'',
pathMatch: ''full''
}
];
Plantilla dentro del componente Inicio :
<router-outlet></router-outlet>
<router-outlet name="route1"></router-outlet>
<router-outlet name="route2"></router-outlet>
<router-outlet name="route3"></router-outlet>
Y un ejemplo de navegación del componente raíz:
constructor(router: Router) {
router.navigateByUrl(''/home/(route1:page1//route2:page2//route3:page3)'');
}
Manera alternativa:
<a [routerLink]="[''/home'', { outlets: {''route1'':[''page1''],''route2'': [''page2''] }}]"></a>
Aquí está el ejemplo de Plunker en vivo
Ver también