Wielokrotne nazwane kąty wylotu routera 2

Question

Chcę wyświetlać różne widoki według tras podrzędnych. Na przykład chcę mój szablon na posiadanie kilku router wylot

Version: @angular/router": "3.0.0-alpha.7"

<router-outlet></router-outlet> 
<router-outlet name="route1"></router-outlet> 
<router-outlet name="route2"></router-outlet> 

W moim routerze chcę podać nazwę routera.

Jak widziałem w pytaniu, rozwiązaniem tego problemu jest określenie AuxRoute, ale AuxRoute nie istnieje w tej wersji.

{path: '/',  component: HomeComponent, as: 'Home'}, 
new AuxRoute({path: '/route1', component: Route1Component, as: 'Route1'}), 
new AuxRoute({path: '/route2', component: Route2Component, as: 'Route2'}) 

Na kanciastej 2 oficjalnej stronie znalazłem, że możliwe jest posiadanie wielu routerów, ale nie mogę znaleźć żadnego zasobu.

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.

Answer 1

Aktualna wersja wielokrotnego nazwie router-outlet (dla angular2 RC.6^) wygląda następująco: konfiguracja

Router

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' 
    } 
]; 

Szablon w terminie Home komponent:

<router-outlet></router-outlet> 
<router-outlet name="route1"></router-outlet> 
<router-outlet name="route2"></router-outlet> 
<router-outlet name="route3"></router-outlet> 

I nawigacja przykład od składnika głównego:

constructor(router: Router) { 
    router.navigateByUrl('/home/(route1:page1//route2:page2//route3:page3)'); 
} 

alternatywny sposób:

<a [routerLink]="['/home', { outlets: {'route1':['page1'],'route2': ['page2'] }}]"></a> 

Oto na żywo Plunker Example

Zobacz także

• Named Router Outlets in Angular 2