带有嵌套路由器出口的 Angular 9 嵌套延迟加载模块

Question

我正在尝试使用 angular 9 开发 SPA，我几乎尝试延迟加载每个组件及其所有子组件。当我尝试在延迟加载的组件之一中使用路由器插座时出现了我的问题，并且我希望使用此路由器插座来加载子组件（这也是延迟加载的）。当我这样做时，我总是在 app.component.html 的主路由器出口中加载所有嵌套的延迟加载组件，而不是嵌套延迟加载组件中的路由器出口

app.component 模板：

<app-navbar></app-navbar>
<router-outlet></router-outlet>

app-routing.module:

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  { path: 'articles', loadChildren: () => import('./articles-viewer/articles-viewer.module').then(m => m.ArticlesViewerModule) },
  { path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) },
  { path: '**', redirectTo: ''}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

应用模块：

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    LoginComponent,
    NavbarComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
    AppAngularMaterial
  ],
  providers: [
    AppHttpInterceptors
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

navbar.component 模板：

<a routerLink="">Home</a>
<a routerLink="/articles">Articles</a>
<a routerLink="/dashboard">Dashboard</a>

仪表板模板：

<a routerLink="statistics">Statistics</a>
<router-outlet></router-outlet>

仪表板模块：

@NgModule({
  declarations: [DashboardComponent],
  imports: [
    CommonModule,
    DashboardRoutingModule,
    AppAngularMaterial
  ]
})
export class DashboardModule { }

仪表板-routing.module：

const routes: Routes = [
  { path: '', component: DashboardComponent },
  { path: 'statistics', loadChildren: () => import('./statistics/statistics.module').then(m => m.StatisticsModule) }
  ];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class DashboardRoutingModule { }

简而言之，统计组件（延迟加载的组件）是在 app.component 模板中声明的 router-outlet 中加载的，而不是在dashboard 模板中的 router-outlet 中，并且仪表板组件被卸载

我试图在 angular.io 中找到解决方案，但我得到的只是在同一个组件中管理多个插座。此外，这就是我在谷歌搜索这个问题时得到的。

有什么解决办法吗？

Answer 1

在仪表板路由.模块中

而不是这个：

const routes: Routes = [
    { path: '', component: DashboardComponent },
    { path: 'statistics', loadChildren: () => 
        import('./statistics/statistics.module').then(m => m.StatisticsModule)
    }
];

做这个：

const routes: Routes = [
    { path: '', component: DashboardComponent,
      children: [
          { path: 'statistics', loadChildren: () => 
           import('./statistics/statistics.module').then(m => m.StatisticsModule)
          }
      ]
    }
];