如何让孙子在角度 6 中使用祖父母 <router-outlet>

Question

我有一个我在这次堆栈闪电战中寻找的示例： https://angular-czk5vj.stackblitz.io/

基本上我要做的是让孙子路由在祖父路由器插座中呈现。

即 路线： 雇员 ---> 企业报告 ------>报告详细信息

查看

当单击第一列中的姓名时，它会转到第二列中的员工报告。单击第二列的报表时，会在第三列显示报表的详细信息。

我觉得我需要在路由中完成此操作的原因是我希望能够通过 url (employees/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，如果需要从列表中选择一个项目，则会显示该PlaceholderComponent。

我使用 Bootstraps Grids 来管理内容在三列中的分布。这就是你所需要的。

---

这里有一个Working Sample StackBlitz 供您参考。