路由器链接中的角度嵌套项答案

【问题标题】：Angular Nested Item In Router Link路由器链接中的角度嵌套项
【发布时间】：2020-05-11 22:17:42
【问题描述】：

我有这个 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 用于测试我的开发应用程序的问题

【问题讨论】：

简而言之，我想要这种导航：菜单 => 工作 => 工作的子类型 => 显示详细信息。在我的浏览器窗口中，我希望它显示如下：localhost:4200/menu/0/1，以便显示“服务器端”子类型的详细信息，例如。您也可以更正此评论。

标签： routing nested angular6 json-server

【解决方案1】：

您应该使用子路由。角度文档 - https://angular.io/guide/router#child-routing-component 这里有一个很好的例子：https://angular-2-training-book.rangle.io/routing/child_routes

注意 - 这意味着子路由只能从父路由访问（例如，只能从 /menu/...）

【讨论】：

感谢您的及时回复，但您会尝试使用我上面的代码显示它