Angular 4：子路由中是否支持多个（命名的）router-outlet？

Question

我有一个主从结构的设置，也有另一个部分用于“编辑”列表项，全部在一个着陆路由上（在我的示例应用程序中，路由是/stuff）。详细组件使用默认的router-outlet填充，并位于/stuff/:index。我正在尝试通过路由/stuff/:index/edit将HTML发送到另一个router-outlet进行编辑部分，但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>

- squirrelsareduck

---

本文涵盖了一个非常相似的场景 https://yakovfain.com/2016/08/16/angular-2-working-with-auxiliary-routes/ - Simon_Weaver

Answer 1

把这些更改应用到 b.component.html 中，它应该按预期运行。

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

对于动态URL，使用 routerLink，首先指定你要进入的路由，然后按照示例定义出口和子路由。

- Mani S