Question

我有一个主 - 细节设置，还有另一个部分用于＆＃34;编辑＆＃34;一个列表项，全部在1个登陆路线上（在我的示例应用中，路线是/ stuff）。详细信息组件使用默认路由器插座填充，位于/ stuff /：index。我试图通过route / stuff /：index / edit将HTML发送到编辑部分的另一个路由器插座，但Angular似乎无法识别路由。

我继续把Bitbucket的情况概括为：

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

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

错误：无法匹配任何路线。网址细分：＆＃39; stuff / 1 / edit＆＃39;

代码中最相关的部分：

路线定义：

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>

Answer 1

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

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

对于动态网址，使用routerLink，首先提及您要去的路线，然后如图所示定义网点和子路线。

Angular 4：子路由中的多个（命名）路由器出口：支持？

1 个答案: