Как заставить внука использовать дедушкув угловых 6

Question

У меня есть пример того, что я ищу в этом стеке блиц: https://angular -czk5vj.stackblitz.io /

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

т.е. маршруты: сотрудники ---> Emp-Reports ------> Report-Detail

View

При нажатии на имя в первом столбце он направляется к отчетам сотрудника во втором столбце.Если щелкнуть отчет во втором столбце, он отобразит подробности отчета в третьем столбце.

Причина, по которой мне нужно сделать это при маршрутизации, заключается в том, что я хочу иметь возможность отправить точный отчет по URL (сотрудники / 11 / reportdetail / 2) чтобы приложение могло открыть этот отчет.Я открыт для другого метода для достижения этой цели.

Answer 1

В вашей реализации есть серьезные проблемы с соглашениями об именах.Поэтому я решил создать свой собственный.В нем нет отложенной загрузки модулей, но это то, что вы уже знаете и можете достичь.

Возвращаясь к вашему требованию, вы можете реализовать каждый уровень как дочерний маршрут к предыдущему уровню.Поэтому каждый шаблон компонента, который является родительским, будет иметь тег router-outlet.

Таким образом, ваша конфигурация routes может выглядеть примерно так:

const routes: Routes = [
  { path: 'employees', component: EmployeesComponent, children: [
    { path: ':id', component: ReportsComponent, children: [
      { path: 'detail/:repId', component: DetailsComponent },
      { path: '**', component: PlaceholderComponent }
    ] },
    { path: '**', component: PlaceholderComponent }
  ] },
  { path: '**', redirectTo: '/employees', pathMatch: 'full' }
];

Обратите внимание, что и здесь я тожеиметь PlaceholderComponent, которое будет отображаться, если элемент должен быть выбран из списка.

Я использовал сетки начальной загрузки для управления распределением контента в трех столбцах.Это все, что вам нужно.

---

Вот вам Рабочий образец StackBlitz для вашей ссылки.