带参数的角延迟加载

Question

我正在尝试通过阅读这篇文章来解决延迟加载问题：

https://www.concretepage.com/angular-2/angular-module-loading-eager-lazy-and-preloading

但它似乎对我不起作用。 我已经设置了这条路线（在我开始搞乱延迟加载之前），它看起来像这样：

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

import { StepsComponent } from './steps.component';

const stepRoutes: Routes = [
  { path: 'steps', redirectTo: 'steps/one', pathMatch: 'full' },
  { path: 'steps/:path', component: StepsComponent }
];

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

所以我想让它延迟加载。所以起初我只是从 AppModule 中删除了我的 StepsModule 并将 AppRouting 模块更新为：

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

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },

  // Lazy load
  //{ path: 'home', loadChildren: 'app/home/home.module#HomeModule '},
  { path: 'steps', loadChildren: 'app/steps/steps.module#StepsModule '}
]

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

我将我的 StepsRouting 模块更改为：

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

import { StepsComponent } from './steps.component';

const stepRoutes: Routes = [
  { path: '', redirectTo: 'steps/one', pathMatch: 'full' },
  { path: 'steps/:path', component: StepsComponent }
];

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

但它不起作用。 我可以看到，当我为应用程序提供服务时，StepsModule 没有加载，但是如果我尝试导航到 steps 视图，我没有收到任何错误，Url 发生了变化，但是它不加载 StepsModule。

有人知道为什么吗？

Answer 1

您现在拥有它的方式将使路线/steps/steps/:path。从stepRoutes 中删除steps/：

{ path: ':path', component: StepsComponent }