Angular 6：如何同时路由到组件和功能模块？答案

【问题标题】：Angular 6: How can I route to both component & featureModule at the same time?Angular 6：如何同时路由到组件和功能模块？
【发布时间】：2018-12-27 11:48:29
【问题描述】：

我想要完成的工作：
我有多个嵌套的功能模块。

AppModule
-- DashboardModule
----- DashboardReportsModule

在路径“仪表板”上，我想将用户重定向到“仪表板/报告”（仪表板的主视图），同时从 DashboardModule 加载包含一些布局 html、其他共享组件和另一个路由器出口的 DashboardComponent元素（名称="dashboard-main-outlet"）。
然后，第二个路由器出口应从 DashboardReportsModule 加载 DashboardReportsComponent（其中将包含一些其他组件和 html...）。
*当导航到其他内部路径（例如“仪表板/设置”、“仪表板/...”）时，第二个路由器插座应该是要更改的，同时保持仪表板组件布局就位。

我是如何做到这一点的：
从根应用程序，在名为“仪表板”的路径上，我像这样路由到 DashboardModule（PageNotFoundComponent 是一个共享的 404 组件）：

src/app/app-routing.module

...
{
  path: 'dashboard',
  loadChildren: './dashboard/dashboard.module#DashboardModule'
},
...

然后，在 DashboardRoutingModule 上，我添加了以下内容：
src/app/dashboard/dashboard-routing.module.ts

...
{
  path: '',
  pathMatch: 'full',
  component: DashboardComponent,
  redirectTo: 'reports'
},
{
  path: '',
  children: [
    {
      path: 'reports',
      loadChildren: './dashboard-reports/dashboard-reports.module#DashboardReportsModule',
      outlet: 'dashboard-main-outlet'
    }
  ]
},
{ path: '**', component: PageNotFoundComponent }
...

这是 DashboardComponent 的模板（第二个路由器插座所在的位置，主要的放在 AppComponent 模板中）：

src/app/dashboard/dashboard.component.html

<h1 class="title">Welcome to the Dashboard!</h1>
<router-outlet name="dashboard-main-outlet"></router-outlet>

结果：
浏览到“仪表板”时，我被重定向到“仪表板/报告”并收到 404 消息。
另一方面，当我删除outlet: 'dashboard-main-outlet' 时，我看到了DashboardReportsComponent 的内容，但没有来自DashboardComponent 的<h1>（它已加载到主路由器插座中）。

我做错了什么？
任何建议都可以。

【问题讨论】：

标签： angular angular2-routing angular-routing angular6

【解决方案1】：

查看注释行

   ...
    {
       path: '',
       component: DashboardComponent,
       redirectTo: 'reports'    // just this is the change i think for proper redirection
    },
    {
      path: '',
      children: [
        {
          path: 'reports',
          loadChildren: './dashboard-reports/dashboard-reports.module#DashboardReportsModule',
          outlet: 'dashboard-main-outlet'
        }
      ]
    },
    { path: '**', component: PageNotFoundComponent }
...

【讨论】：

我起初尝试过，但随后它在每次刷新时将“报告”添加到路径中（“仪表板/报告”、“仪表板/报告/报告”、...）以及 -它没有解决我的问题。我仍然收到 404 页面...
更新：我通过添加 pathMatch: 'full' 解决了重复问题（*我编辑了我的原始问题）。不过，它对我描述的问题没有任何影响。

【解决方案2】：

更新：
最终，我在阅读了有关“路由和导航”的整个 Angular 官方文档后，发现their example of "child routes" 非常清晰，它帮助我们重新组织了我的功能模块和正确路由。

解决方案是使用主路由器插座（而不是命名路由器），每个嵌套功能模块都有自己的路由器插座，仪表板路由配置现在是：
src/app/dashboard/dashboard-routing。模块.ts

...
{
  path: '',
  component: DashboardComponent,
  children: [
    {
      path: 'reports',
      loadChildren: './dashboard-reports/dashboard-reports.module#DashboardReportsModule'
    },
    {
      path: '',
      pathMatch: 'full',
      redirectTo: 'reports'
    },
    { path: '**', component: PageNotFoundComponent }
  ]
},
...

虽然仪表板的主要组件如下所示：
src/app/dashboard/dashboard.component.html

<h1 class="title">Welcome to the Dashboard!</h1>
<router-outlet></router-outlet>

结果：
当浏览到“仪表板”时，我被重定向到“仪表板/报告”，在那里我可以看到来自 DashboardComponent 的 H1 标签和它的路由器插座下的 DashboardReportsComponent 的内容。
问题解决了！

【讨论】：