Question

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

Answer 1

在路由器3.3.1中使用Angular 2.3.1（angular-cli），这是我提出的工作解决方案。

顶级路由器，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）路由器，其各自的组件输出到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>

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

这不是一个真正的新解决方案，而是针对此特定设置的各种解决方案的混合。希望这可以节省一些时间和挫折。

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

1 个答案: