Question

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

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

app.module：

@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>

dashboard.module：

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

dashboard-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模板中声明的路由器出口中，而不是仪表板模板中的路由器出口中，并且仪表板组件被卸载

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

对此有什么解决办法吗？

Answer 1

在dashboard-routing.module中

代替此：

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)
          }
      ]
    }
];

Answer 2

我遇到了类似的问题！我这边的问题是我导入了延迟加载的模块，因此应用路由器出口的路由定义是可见的。

如果您需要示例，请随时发表评论。

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

2 个答案: