Question

我要完成的任务：
我有多个嵌套的功能模块。

AppModule
-- DashboardModule
----- DashboardReportsModule

在路径“仪表板”上，我想将用户重定向到“仪表板/报告”（仪表板的主视图），同时从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的模板（第二个路由器出口所在的位置，主要的放置在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>（已加载到主路由器出口中）。

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

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

更新：
最终，我在阅读了有关“路由和导航”的整个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>

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

Angular 6：如何同时路由到component和featureModule？

2 个答案: