Angular2在同一个模板中有多个路由器插座

Question

是否可以在同一个模板中安装多个路由器插座？

如果是,那么如何配置路由？

我正在使用angular2 beta.

Answer 1

是的,你可以,但你需要使用辅助路由.您需要为路由器插座命名:

<router-outlet name="auxPathName"></router-outlet>

并设置您的路由配置:

@RouteConfig([
  {path:'/', name: 'RetularPath', component: OneComponent, useAsDefault: true},
  {aux:'/auxRoute', name: 'AuxPath', component: SecondComponent}
])

看看这个例子:http://plnkr.co/edit/JsZbuR？p = preview 同样这个视频:https://www.youtube.com/watch？v = z1NB-HG0ZH4 &feature = youtu.be

RC.5 Aux路由的更新有所改变:在路由器插座中使用一个名称:

<router-outlet name="aux">

在您的路由器配置中:

{path: '/auxRouter', component: secondComponentComponent, outlet: 'aux'}

Answer 2

通过配置路由器并为路由器插座提供名称,您可以在同一模板中安装多个路由器插座,

你可以这样做到这一点.

以下方法的优点是,您可以避免看起来脏的URL.例如:/ home(aux:login)等.

假设在加载时你是引导appComponent.

app.component.html

<div class="layout">
    <div class="page-header">
        //first outlet to load required component
        <router-outlet name='child1'></router-outlet>
    </div>
    <div class="content">
        //second outlet to load required component
        <router-outlet name='child2'></router-outlet>
    </div>
</div>

添加以下内容到路由器.

{
    path: 'home',  // you can keep it empty if you do not want /home
    component: 'appComponent',
    children: [
        {
            path: '',
            component: childOneComponent,
            outlet: 'child1'
        },
        {
            path: '',
            component: childTwoComponent,
            outlet: 'child2'
        }
    ]
}

现在当/ home加载时,appComponent将使用已分配的模板加载,然后角度路由器将检查路由并根据名称加载指定路由器出口中的子组件.

如上所述,您可以将路由器配置为在同一路由中有多个路由器出口.

Answer 3

使用新的RC.3路由器更改了Aux路由语法.

aux路线存在一些已知问题,但可以获得基本支持.

您可以定义路径以显示已命名的组件 <router-outlet>

路线配置

{path: 'chat', component: ChatCmp, outlet: 'aux'}

命名路由器插座

<router-outlet name="aux">

导航辅助路线

this._router.navigateByUrl("/crisis-center(aux:chat;open=true)");

似乎尚不支持从routerLink导航辅助路由

<a [routerLink]="'/team/3(aux:/chat;open=true)'">Test</a>

<a [routerLink]="['/team/3', {outlets: {aux: 'chat'}}]">c</a>

我还没试过

另请参见一个组件中的Angular2路由器

RC.5 routerLink DSL(与createUrlTree参数相同)https://angular.io/docs/ts/latest/api/router/index/Router-class.html#!#createUrlTree-anchor

Answer 4

<a [routerLink]="[{ outlets: { list:['streams'], details:['parties'] } }]">Link</a>

<div id="list">
    <router-outlet name="list"></router-outlet>
</div>
<div id="details">
    <router-outlet name="details"></router-outlet>
</div>

`

 {
    path: 'admin',
    component: AdminLayoutComponent,
    children:[
      {
        path: '',
        component: AdminStreamsComponent, 
        outlet:'list'
      },
      {
        path: 'stream/:id',
        component: AdminStreamComponent,
        outlet:'details'
      }
    ]
  }