我有这个JSON文件,其中包含类似的工作:
{
"jobs": [
{
"id": 0,
"name": "Web Dev",
"price": 200,
"subtypes": [
{
"id": 0,
"name": "Client Side",
"price": 49.99
},
{
"id": 1,
"name": "Server Side",
"price": 49.99
},
{
"id": 2,
"name": "SEO",
"price": 49.99
}
]
}
}
我的路线像:
export const routes: Routes = [
{ path: 'menu', component: MenuComponent },
{ path: 'menu/:id', component: JobDetailComponent },
{ path: 'menu/:id/:subtypes/:id', component: ItemDetailComponent }
]
菜单正在通过此代码正确显示所有作业:
<div fxFlex *ngIf="jobs">
<mat-grid-list cols="3" rowHeight="200px" >
<mat-grid-tile *ngFor="let job of jobs" [routerLink]="['/menu', job.id]">
<h1>{{job.name | uppercase}}</h1>
</mat-grid-tile>
</mat-grid-list>
</div>
单击“ mat-grid-tile”后,代码将正确地路由到作业子类型页面,如下所示:
<div fxFlex *ngIf="job.subtypes">
<div *ngFor="let stp of job.subtypes" [routerLink]="['/menu', stp.id, '/subtypes', stp.id]">
<h1>{{stp.name}}</h1>
</div>
</div>
但是,单击时我无法获得路由器链接以重定向到所需的子类型页面。
子类型页面如下:
<div *ngIf="job.subtypes">
<h1>
{{job.name}}
<h1>
</div>
并且它没有在单击的子类型链接上显示所需的信息
除了我的代码不正确以外,我想是这样;使用嵌套信息的事实是JSON-serve api用来测试我的开发应用程序的问题]
您应该使用子路线。Angular文档-https://angular.io/guide/router#child-routing-component这里是一个很好的例子:https://angular-2-training-book.rangle.io/routing/child_routes
注意-这意味着只能从父级访问子级路由(例如,只能从/ menu / ...访问)