Question

我看过以下内容，但仍然无法导航到延迟加载的路由。我已删除canLoad和canActivate进行测试。就我而言，我的父路线需要接收一个ID。

How can I navigate to lazy loaded module child routes?

https://www.concretepage.com/angular/angular-canload-guard-example

请查看应用程序路由模块中的PROJECTS SUB ITEMS SECTION -- LAZY LOADED。

应用程序模块

@NgModule({
  declarations: [
    AppComponent,
    FooterComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    //RouterModule,
    AppMaterialModule, //angular material components
    AppRoutingModule, //all routes are specified here, sub and line components module is specified here which in turn uses its own routing module
    AppSharedModule, //shared modules
    AppComponentsModule, //this has the components declared
    NgIdleKeepaliveModule.forRoot()
  ],
  //Title is the service by angular, using it for putting in document titles, check app.component
  providers: [Title, DataService, AuthService, AuthGuard, UtilityEnumService, LocalStorageService, ErrorMessageService, GroupService, ProgressBarService ], 
  bootstrap: [AppComponent]
})
export class AppModule { }

应用程序路由模块

const appRoutes: Routes = [
  { path: '', component: HomeComponent, pathMatch: "full", data: { title: 'Home' } }, 
  { path: 'home', component: HomeComponent, data: { title: 'Home' } },

  /****************   PROJECTS MAIN SECTION *********************/
  { path: 'projects', component: ProjectsComponent, canActivate: [AuthGuard], data: { title: 'Projects' } },
  { path: 'projects/add', component: ProjectEditComponent, canActivate: [AuthGuard], data: { title: 'Add Project' } }, //new project
  { path: 'projects/:projectId', component: ProjectDetailComponent, canActivate: [AuthGuard], data: { title: 'Project Detail' } }, //detail - keep it before below edit
  { path: 'projects/:projectId/edit', component: ProjectEditComponent, canActivate: [AuthGuard], data: { title: 'Edit Project' } },

  /****************   PROJECTS SUB ITEMS SECTION -- LAZY LOADED *********************/
  {
    /* for easy loading, moved the sub and line to app-routing-sub-line.module and used inside app-components-sub-line.module */
    path: 'projects/:projectId/sub', loadChildren:'./app-components-sub-line.module#AppComponentsSubAndLineModule'
  },

  /****************   default, keep it at the bottom *********************/
  { path: '**', component: PageNotFoundComponent, data: { title: 'Page Not Found' } }
];

const routingConfig: ExtraOptions = {
  paramsInheritanceStrategy: 'always',
  preloadingStrategy: PreloadAllModules
}

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(appRoutes, routingConfig) 
  ],
  exports: [RouterModule],
  declarations: []
})
export class AppRoutingModule { }

应用路由子行和线路-这些需要延迟加载

const appSubAndLineRoutes: Routes = [
  {
    //for lazy loading the parent route needs to be empty since we have placed this inside the app-routing.module
    //path: 'projects/:projectId/sub', component: ProjectSubComponent, canActivate: [AuthGuard], data: { title: 'Project Sub' },
    path: '', component: ProjectSubComponent, data: { title: 'Project Sub' },
    children: [
      //catch all
      { path: '', component: SelectTheItemComponent, data: { title: 'Project Sub' } },
      { path: 'add', component: ProjectSubEditComponent, data: { title: 'Add Sub' } }, //new sub project
      { path: ':subId', component: ProjectSubDetailComponent, data: { title: 'Sub View' } }, //View - keep it before below edit
      { path: ':subId/detail-list', component: ProjectSubDetailListComponent, data: { title: 'Sub Detail' } }, //Detail - keep it before below edit
      { path: ':subId/edit', component: ProjectSubEditComponent, data: { title: 'Edit Sub' } },
      { path: ':subId/config-edit', component: ProjectSubConfigComponent, data: { title: 'Edit Sub Config' } },
      { path: ':subId/line/add', component: ProjectSubLineEditComponent, data: { title: 'Add Sub Line' } },
      { path: ':subId/line/:lineId/edit', component: ProjectSubLineEditComponent, data: { title: 'Edit Sub Line' } },
      { path: ':subId/line/:lineId/config', component: ProjectSubLineConfigComponent, data: { title: 'Config Sub Line' } },
      { path: ':subId/line/:lineId/view', component: ProjectSubLineViewComponent, data: { title: 'View Sub Line' } }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(appSubAndLineRoutes)],
  exports: [RouterModule]
})

export class AppRoutingSubAndLineModule { }

应用组件子和子行声明模块

这具有子和线路路由模块的导入。看完示例之后，我认为不需要在其他任何地方导入路由模块。

@NgModule({
  declarations: [
    ProjectSubComponent,
    ProjectSubListComponent,
    ProjectSubDetailComponent,
    ProjectSubEditComponent,
    ProjectSubConfigComponent,
    ProjectSubDetailListComponent,
    ProjectSubLineEditComponent,
    ProjectSubLineConfigComponent,
    ProjectSubLineViewComponent,
    ProjectSubLineHdrComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingSubAndLineModule, //sub and line routing module
    AppSharedModule //shared module
  ],
  exports: [
  ]
})

export class AppComponentsSubAndLineModule { }

最后导航到路线

this.router.navigate(['projects', id, 'sub']);

我在这里想念什么？我的路线需要获取ID。当我分别在应用模块中导入路线和组件时，我可以导航至这些。

Answer 1

应用模块中的导入顺序很重要。确定订单后，它现在可以工作了。

@NgModule({
  declarations: [
    AppComponent,
    FooterComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppMaterialModule, //angular material components
    RouterModule,
    AppSharedModule, //shared modules
    AppComponentsModule, //this has the general components decalred that we havent put in shared or child modules
    AppRoutingModule, //all general routes are here. keep it last
    NgIdleKeepaliveModule.forRoot()
  ],
  //Title is the service by angular, using it for putting in document titles, check app.component
  providers: [Title, DataService, AuthService, AuthGuard, UtilityEnumService, LocalStorageService, ErrorMessageService, GroupService, ProgressBarService ], 
  bootstrap: [AppComponent]
})

无法导航到角度6

1 个答案: