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路由语法。

辅助路线存在一些已知问题，但可以获得基本支持。

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

def question1(s, t): dt = {} for c in range(97, 123): dt[chr(c)] = t.count(chr(c)) for i in range(len(s) - len(t) + 1): contains = True for c in range(97, 123): if dt[chr(c)] > s[i:i+len(t)].count(chr(c)): contains = False break if contains: return True return False

<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>

Answer 5

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

首先，您需要为要在视图中加载第二个路由视图的router-outlet提供名称。（aux routing angular2。）
在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）的方法可以在一个模板中重用路由器出口：

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

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

但是，这似乎不是推荐的方法，因为两个模板的整个交换似乎有些麻烦。

Answer 7

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

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>

Answer 8

在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 9

这对我有用，而且非常直接和简单。

<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>

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

9 个答案: