web-dev-qa-db-ja.com

複数の名前付きルーターアウトレットangular 2

子ルートごとに異なるビューを表示したい。たとえば、テンプレートに複数のルーターアウトレットを保持させたい

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

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

私のルーターでは、ルーターの名前を指定します。

質問で見たように、これに対する解決策はAuxRouteを指定することですが、AuxRouteはこのバージョンには存在しません。

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

angular 2公式ウェブサイトでは、複数のルーターを使用することは可能ですが、リソースが見つかりません。

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.

angularangular-routing
15
Prince

複数の名前が付けられた現在のバージョンrouter-outlet（angular2RC.6 ^の場合）は次のようになります。

ルーター設定

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

TemplateHomeコンポーネント内：

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

そして、ルートコンポーネントからのnavigationの例：

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

別の方法：

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

ライブ プランカーの例

こちらもご覧ください

31
yurzui