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 router in one component

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

Answer 5

是的，你可以像@tomer上面说的那样。我想为@tomer答案添加一些观点。

• 首先，您需要为router-outlet提供名称，以便在视图中加载第二个路由视图。 （辅助路由角度2.）
• 在angular2路由中，这里有一些重点。 path或aux（只需要其中一个来提供你必须显示为url的路径）。 component，loader，redirectTo（只需要其中一个，你想要在路由上加载哪个组件） name或as（可选）（只需要其中一个，在routerLink时指定的名称） 数据（可选，无论您想要使用路由器发送的任何内容，您必须在接收器端使用routerParams。）

欲了解更多信息，请阅读here和here.

import {RouteConfig, AuxRoute} from 'angular2/router';
@RouteConfig([
  new AuxRoute({path: '/home', component: HomeCmp})
])
class MyApp {}

Answer 6

似乎有另一种（相当hacky）方法在一个模板中重用router-outlet：

https://stackblitz.com/edit/router-outlet-twice-with-events

路由器插座由ng-template包裹。通过侦听路由器的事件来更新模板。在每个事件中，模板都被交换并与空占位符重新交换。如果没有“交换”，模板将不会更新。

这似乎不是一种推荐的方法，因为整个交换两个模板看起来有点hacky。