Блог

В настоящее время я работаю над переходом от основного к подробному представлению с дочерними маршрутами, и я не уверен, что делаю это правильно.

Я создал свой собственный модуль и свои компоненты в нем. Модуль имеет свой собственный модуль маршрутизатора, в котором настраиваются дочерние маршруты. Как здесь:

 const routes: Routes = [
  {
    path: '',
    component: ParentComponent,
    children: [
      {
        path: 'details',
        component: DetailsComponent
      }
    ]
  }
];
  

В этом списке (25% от ширины области просмотра) Я хотел бы щелкнуть по элементу, чтобы рядом с ним отображался подробный вид (75% области просмотра):

 <div class="list">
  <mat-list role="list">
    <mat-list-item role="listitem" routerLink='details'>
      <div class="list-entry">
        <p>Lorem Ipsum</p>
      </div>
    </mat-list-item>
  </mat-list>
</div>
  

Таким образом, я разместил свой дополнительный выход маршрутизатора в родительском компоненте:

   <div class="main-wrapper">
    <div class="header">
      <div class="title">
        <h4>Title</h4>
      </div>
      <filter-component></filter-component>
    </div>
    <div class="content">
      <my-list-component></my-list-component>
      <router-outlet></router-outlet> // Details should be loaded here
    </div>
  </div>
  

Мой компонент details выглядит следующим образом (детали должны закрываться, когда я нажимаю на значок):

 <div class="wrapper">
    <i class="custom-icon-class" routerLink='my-list'></i>
    <h5 class="headline">Lorem Ipsum</h5>
</div>
  

Мой путь должен выглядеть так:

Показывать только список:

localhost:3000/my-app/my-list

Показать сведения о выбранном элементе (возможно, с идентификатором?):

localhost:3000/my-app/my-list/details

И когда я нажимаю на X в подробном представлении, он должен исчезнуть, чтобы я снова попал на следующий путь:

localhost:300/my-app/my-list

Выглядит хорошо. Одно предложение, в компоненте details, вместо routerLink='my-list' того, чтобы вы должны сделать routerLink="../" .