Angular 4：子路由中的多个（命名）路由器插座：支持吗？答案

【问题标题】：Angular 4: Multiple (named) router-outlets in a child route: supported?Angular 4：子路由中的多个（命名）路由器插座：支持吗？
【发布时间】：2017-06-24 23:49:47
【问题描述】：

我有一个主详细信息设置，还有另一个用于“编辑”列表项的部分，全部位于 1 条着陆路线上（在我的示例应用程序中，路线是 /stuff）。 detail 组件使用默认的 router-outlet 填充，位于 /stuff/:index 。我正在尝试通过路由 /stuff/:index/edit 将 HTML 发送到另一个路由器插座以进行编辑部分，但 Angular 似乎无法识别该路由。

我继续在 Bitbucket 上放了一个通用版本的情况：

https://bitbucket.org/squirrelsareduck/angularrouting/

无论如何，一般错误是这样的：

错误：无法匹配任何路由。 URL 段：'stuff/1/edit'

代码中最相关的部分：

路由定义：

const routes: Routes = [
  { path: 'stuff', component: AComponent, children:[
    { path: ':index', component: BComponent},
    { path: ':index/edit', component: EditComponent, outlet:'editsection'}
  ]}
];

a.component.html:

<ul>
  <app-listitem
    *ngFor="let a of items; let indexOI = index;"
    [index]="indexOI"
  [contentOI]="a">
  </app-listitem>
</ul>
<router-outlet></router-outlet>
<router-outlet name="editsection"></router-outlet>

b.component.html:

<p>
  Detail section works! {{ index }}
  <button
    type="button"
    [routerLink]="['edit',{outlets:{editsection:'/stuff/:index/edit'}}]">
    Edit
  </button>
</p>

edit.component.html（不太相关，但很重要）

<p>
  edit section works!
</p>

【问题讨论】：

这篇文章涵盖了一个非常相似的场景yakovfain.com/2016/08/16/…

标签： angular

【解决方案1】：

在b.component.html 中应用这些更改，它应该可以按预期工作。

<p>
  Detail section works! {{ index }}
 <button type="button"
   [routerLink]="['/stuff',{outlets:{editsection:':index/edit'}}]">Edit</button>
</p>

对于动态 URL，使用routerLink，首先，提及您要走的路线，然后定义出口和子路线，如图所示。

【讨论】：