Angular 6：如何同时路由到component＆featureModule？-Java 学习之路

What I'm trying to accomplish:
我有多个嵌套功能模块 .

AppModule
-- DashboardModule
----- DashboardReportsModule

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

How I tried to do that:
从根应用程序，在名为'dashboard'的路径上，我正在路由到DashboardModule（PageNotFoundComponent是一个共享的404组件）：

SRC /应用程序/应用-routing.module

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

然后，在DashboardRoutingModule上，我添加了这个：
SRC /应用/仪表板/仪表板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 /应用/仪表板/ dashboard.component.html

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

The result:
浏览到'dashboard'我'm redirected to ' dashboard / reports'并获取404消息 .
另一方面，当我删除 outlet: 'dashboard-main-outlet' 时，我看到了DashboardReportsComponent的内容，但没有来自DashboardComponent的 <h1> （它被加载到主路由器插座中） .

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

2 回答

看到注释行

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

回复于 2024-04-26T18:13:43+08:00

0
UPDATE:
最后，在阅读了关于"Routing & Navigation"的整个官方Angular文档后，我发现their example of "child routes"非常清楚，它帮助我们正确地重新组织我的功能模块和路由 .

解决方案是使用主路由器插座（而不是命名的），每个嵌套功能模块都有自己的路由器插座和仪表板路由配置现在：
SRC /应用/仪表板/仪表板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 /应用/仪表板/ dashboard.component.html
```
<h1 class="title">Welcome to the Dashboard!</h1>
<router-outlet></router-outlet>
```
The result:
浏览到'dashboard'我'm redirected to '仪表板/报告', there I can see both the H1 tag from the DashboardComponent & the contents of the DashboardReportsComponent under it' s router-outlet .
问题解决了！
回复于 2024-04-26T18:13:43+08:00

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

2 回答

相关问题