angular - 同一模板中的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}
])

看看这个例子，还有这个视频。

---

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 路由器更改了辅助路由语法。

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

您可以定义路由以在命名的组件中显示组件<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'
      }
    ]
  }

Answer 5

是的，正如上面@tomer 所说，您可以。我想为@tomer 答案添加一些要点。

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

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

  • path 或 aux （需要其中之一来提供您必须显示为 url 的路径）。
  • component、loader、redirectTo（恰好需要其中之一，您要在路由上加载哪个组件）
  • name 或 as（可选）（需要其中之一，在 routerLink 时指定的名称）
  • 数据（可选，无论您想使用接收端使用 routerParams 获得的路由发送的任何内容。）

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

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

Answer 6

您不能在具有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>

Answer 7

似乎有另一种（相当老套的）方法可以在一个模板中重用路由器插座。此答案仅供参考，此处使用的技术可能不应在生产中使用。

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

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

不过，这绝对不是推荐的方法，因为两个模板的整个交换似乎有点 hacky。

在控制器中：

  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>

Answer 8

这对我有用，而且非常简单明了。

<div *ngIf="authenticated">
  <ng-container *ngTemplateOutlet="template"></ng-container>
</div>

<div *ngIf="!authenticated">
  <ng-container *ngTemplateOutlet="template"></ng-container>
</div>

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