我有一个主从结构的设置,也有另一个部分用于“编辑”列表项,全部在一个着陆路由上(在我的示例应用程序中,路由是/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>