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

Question

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

AppModule
-- DashboardModule
----- DashboardReportsModule

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

我是如何做到的：
从根应用程序，在名为 'dashboard' 的路径上，我正在像这样路由到 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的模板（第二个router-outlet所在的地方，主要的放在AppComponent模板中）：

src/app/dashboard/dashboard.component.html

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

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

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

Answer 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 }
...

Answer 2

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

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

结果：
当浏览到 'dashboard' 时，我被重定向到 'dashboard/reports'，在那里我可以看到 DashboardComponent 的 H1 标记及其路由器出口下的 DashboardReportsComponent 的内容。
问题已解决！

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

Angular 6: How can I route to both component & featureModule at the same time?

angular-routing

angular2-routing

angular

angular6