我有一个包含以下工作的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用来测试我的开发应用程序的问题
答案 0 :(得分:0)
您应该使用子路线。 Angular文档-https://angular.io/guide/router#child-routing-component 这里是一个很好的例子:https://angular-2-training-book.rangle.io/routing/child_routes
注意-这意味着子路由只能从父路由访问(例如,只能从/ menu / ...访问)