小编m.a*_*m.a的帖子

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

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

app.component 模板:

<app-navbar></app-navbar>
<router-outlet></router-outlet>
Run Code Online (Sandbox Code Playgroud)

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 { }
Run Code Online (Sandbox Code Playgroud)

应用模块:

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    LoginComponent,
    NavbarComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule, …
Run Code Online (Sandbox Code Playgroud)

nested lazy-loading router-outlet angular9

5
推荐指数
1
解决办法
1256
查看次数

标签 统计

angular9 ×1

lazy-loading ×1

nested ×1

router-outlet ×1