Angular2多个路由器出口在同一模板中

同一模板中可以有多个路由器出口吗？

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

我正在使用angular2 beta。

是的，可以，但是您需要使用辅助路由。您将需要给路由器出口起个名字：

<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辅助路由的更新有所更改：在路由器出口中使用一个名称：

<router-outlet name="aux">

在您的路由器配置中：

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

通过配置路由器并为路由器插座提供名称，您可以在同一模板中具有多个路由器插座，您可以按以下步骤实现。

以下方法的优点是，您可以避免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将使用分配的模板进行加载，然后有角度的路由器将根据名称检查路由并在指定的路由器出口中加载子组件。

像上面一样，您可以将路由器配置为在同一路由中具有多个路由器出口。

新的RC.3路由器更改了辅助路由语法。

辅助路由存在一些已知问题，但可以提供基本支持。

您可以定义路线以显示命名的组件 <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

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

是的，您可以按照上面@tomer的说法进行操作。我想为@tomer答案添加一些观点。

• 首先，您需要在router-outlet视图中提供要加载第二个路由视图的位置的名称。（辅助路由angular2。）

• 在angular2路由中，这里没有几个要点。

  • path或aux（需要其中之一来提供必须显示为url的路径）。
  • 组件，加载器，redirectTo（恰好需要其中之一，即要在路由上加载的组件）
  • name或as（可选）（仅要求其中之一，即在routerLink时指定的名称）
  • 数据（可选，无论您希望通过接收方使用routerParams进行路由发送的任何内容。）

有关更多信息，请在此处和此处阅读。

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

似乎有另一种（颇为怪异的）方式可以在一个模板中重用路由器出口。该答案仅用于提供信息的目的，此处使用的技术可能不应在生产中使用。

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

路由器插座由ng模板包装。通过侦听路由器的事件来更新模板。在每次事件中，都将交换模板并使用空的占位符重新交换模板。没有此“交换”，模板将不会更新。

但是，绝对不建议使用这种方法，因为两个模板的整体交换似乎有点麻烦。

在控制器中：

  ngOnInit() {
    this.router.events.subscribe((routerEvent: Event) => {
      console.log(routerEvent);
      this.myTemplateRef = this.trigger;
      setTimeout(() => {
        this.myTemplateRef = this.template;
      }, 0);
    });
  }

在模板中：

<div class="would-be-visible-on-mobile-only">
  This would be the mobile-layout with a router-outlet (inside a template): 
  <br>
  <ng-container *ngTemplateOutlet="myTemplateRef"></ng-container>
</div>

<hr>

<div class="would-be-visible-on-desktop-only">
  This would be the desktop-layout with a router-outlet (inside a template): 
  <br>
  <ng-container *ngTemplateOutlet="myTemplateRef"></ng-container>
</div>

<ng-template #template>
    <br>
    This is my counter: {{counter}}
    inside the template, the router-outlet should follow
    <router-outlet>
    </router-outlet>
</ng-template>

<ng-template #trigger>
  template to trigger changes...
</ng-template>

您不能在具有ngIf条件的同一模板中使用多个路由器出口。但是您可以按以下所示方式使用它：

<div *ngIf="loading">
  <span>loading true</span>
  <ng-container *ngTemplateOutlet="template"></ng-container>
</div>

<div *ngIf="!loading">
  <span>loading false</span>
  <ng-container *ngTemplateOutlet="template"></ng-container>
  </div>

  <ng-template #template>
    <router-outlet> </router-outlet>
  </ng-template>