Angular вложенный элемент в роутере - PullRequest
Новая
       15

Angular вложенный элемент в роутере

0 голосов
/ 26 января 2020

У меня есть 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, который я использую для тестирования моего приложения dev

1 Ответ

0 голосов
/ 26 января 2020

Вы должны использовать дочерние маршруты. Angular документация - https://angular.io/guide/router#child -routing-component И хороший пример здесь: https://angular-2-training-book.rangle.io/routing/child_routes

Примечание - это означает, что дочерние маршруты будут доступны только из родитель (например, только из /menu/...)

...