帶參數的角延遲加載

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 ，但是如果嘗試導航至步驟視圖，則不會出現任何錯誤，Url會更改，但不會加載StepsModule 。

有人知道為什么嗎？

Answer 1

您現在擁有的方式將成為路線/steps/steps/:path 。 從stepRoutes刪除steps/ ：

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