在Angular中，异步路由允许你在导航到某个路由时按需加载相关的模块。这有助于提高应用的性能，因为只有在需要时才会加载必要的模块。以下是如何在“英雄之旅”应用中添加异步路由的一般步骤。

首先，确保你的Angular应用使用了Angular CLI。如果尚未使用，请安装它：
npm install -g @angular/cli

接下来，在项目的根目录下，通过以下命令生成一个名为crisis-center的特性模块：
ng generate module crisis-center --routing

这个命令会创建一个名为crisis-center的模块，并生成一个带有路由配置的crisis-center-routing.module.ts文件。

打开crisis-center-routing.module.ts文件，并添加一些异步路由配置：
// crisis-center-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { CrisisCenterComponent } from './crisis-center.component';
import { CrisisListComponent } from './crisis-list/crisis-list.component';
import { CrisisDetailComponent } from './crisis-detail/crisis-detail.component';

const routes: Routes = [
  {
    path: '',
    component: CrisisCenterComponent,
    children: [
      {
        path: 'crises',
        component: CrisisListComponent,
      },
      {
        path: 'detail/:id',
        component: CrisisDetailComponent,
      },
      {
        path: '',
        redirectTo: 'crises',
        pathMatch: 'full',
      },
    ],
  },
];

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

在上述代码中，我们使用RouterModule.forChild(routes)来配置CrisisCenterRoutingModule。这是因为crisis-center模块是一个特性模块，而不是应用的根模块。

接下来，在crisis-center模块的目录中，为每个异步加载的组件创建一个特性模块。使用以下命令创建：
ng generate module crisis-list --route crises --module crisis-center
ng generate module crisis-detail --route detail/:id --module crisis-center

这将分别创建crisis-list.module.ts和crisis-detail.module.ts文件，并为每个模块配置异步加载的路由。

最后，打开app-routing.module.ts文件，并将CrisisCenterRoutingModule添加到路由配置中：
// app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HeroListComponent } from './hero-list/hero-list.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { AuthGuard } from './auth-guard.service';
import { CrisisCenterComponent } from './crisis-center/crisis-center.component';
import { CrisisCenterRoutingModule } from './crisis-center/crisis-center-routing.module'; // 导入 CrisisCenterRoutingModule

const routes: Routes = [
  { path: 'heroes', component: HeroListComponent },
  { path: 'detail/:id', component: HeroDetailComponent, canActivate: [AuthGuard] },
  { path: 'crisis-center', loadChildren: () => import('./crisis-center/crisis-center.module').then(m => m.CrisisCenterModule) },
  { path: '', redirectTo: '/heroes', pathMatch: 'full' },
];

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

在上述代码中，我们使用loadChildren属性来异步加载CrisisCenterModule。loadChildren接受一个函数，该函数返回一个Promise，该Promise解析为需要加载的模块。我们使用import语法来实现异步加载。

通过上述步骤，你的Angular应用现在应该具有异步加载模块的功能。请注意，异步加载模块需要Web服务器支持，以便在运行时动态获取模块。


转载请注明出处：http://www.pingtaimeng.com/article/detail/4946/Angular