如何使用延迟加载模块进行子路由？

Question

有了新的路由器，真的不需要使用辅助路由，如果你懒加载一个有自己的路由和路由器的模块，那么根据现有的例子，你甚至不太可能让它工作 (我尝试了一整天使用 Whosebug 上的每个示例都无济于事）。那么这个工作示例是什么样的？

Answer 1

将 Angular 2.3.1 (angular-cli) 与路由器 3.3.1 一起使用，这是我想出的可行解决方案。

顶级路由器，app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
  { path: '', redirectTo: '/login', pathMatch: 'full', canActivate: [AuthGuard] },
  { path: 'login', component: AuthComponent },
  { path: 'analyze', loadChildren: 'app/analyze/analyze.module#AnalyzeModule', canActivate: [AuthGuard] }
];
@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

延迟加载模块（AnalyzeModule）路由器，其各自的组件被输出到原始router-outlet中app-component：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
   { path: '', component: AnalyzeComponent,
      children: [
         { path: 'charts', component: ChartsComponent },
         { path: 'graphs', component: GraphsComponent },
      ]
   }
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class AnalyzeRoutingModule { }

延迟加载的组件html:

 <li><a href="#" [routerLink]="['charts']" routerLinkActive="active">Charts</a></li>
 <li><a href="#" [routerLink]="['graphs']" routerLinkActive="active">Graphs</a></li>
<router-outlet></router-outlet>

请注意，由于您是延迟加载模块，因此新的默认路径是空白的，就像在其上方的路由器中一样。这里的关键是将路由列为子路由，而不是使用辅助 router-outlet（无论您对此特定设置做什么，它都会失败）。这样做意味着你可以只使用一个普通的 router-outlet 和普通的 routerLinks（没有辅助插座和它附带的所有混乱），而不会覆盖 [=] 中原始 router-outlet 中加载的惰性组件28=].html （或者下一个级别是什么）如果你不使用辅助插座并且不同时将子路径列为子路径，就会发生这种情况。

这并不是真正的新解决方案，而是针对此特定设置的各种解决方案的混合体。希望这会节省一些时间和挫败感。

如何使用延迟加载模块进行子路由？

How to sub route with lazy loaded module?

angular-routing

angular