Je souhaite afficher différentes vues par itinéraires enfants. Par exemple, je veux que mon modèle contienne plusieurs sorties de routeur
Version: @angular/router": "3.0.0-alpha.7"
<router-outlet></router-outlet>
<router-outlet name="route1"></router-outlet>
<router-outlet name="route2"></router-outlet>
Dans mon routeur, je veux spécifier le nom du routeur.
Comme je l'ai vu dans une question, la solution est de spécifier AuxRoute, mais AuxRoute n'existe pas dans cette version.
{path: '/', component: HomeComponent, as: 'Home'},
new AuxRoute({path: '/route1', component: Route1Component, as: 'Route1'}),
new AuxRoute({path: '/route2', component: Route2Component, as: 'Route2'})
Pendant que je suis sur angular 2 officiel, j'ai trouvé qu'il était possible d'avoir plusieurs routeurs, mais je ne trouve aucune ressource.
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.
Version actuelle à noms multiples router-outlet
(pour angular2 RC.6 ^ ) ressemble à ceci:
Configuration du routeur
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'
}
];
Modèle dans le composant Accueil :
<router-outlet></router-outlet>
<router-outlet name="route1"></router-outlet>
<router-outlet name="route2"></router-outlet>
<router-outlet name="route3"></router-outlet>
Et un exemple de navigation du composant racine:
constructor(router: Router) {
router.navigateByUrl('/home/(route1:page1//route2:page2//route3:page3)');
}
Autre moyen:
<a [routerLink]="['/home', { outlets: {'route1':['page1'],'route2': ['page2'] }}]"></a>
Voici en direct Exemple de Plunker
Voir également