[英]Angular loadChildren isn't doing anything
我將在PluralSight上學習有關Angular基礎知識的課程,並使用用戶模塊和事件模塊創建事件管理站點。 (該課程沒有將事件管理放入功能模塊中,而是由我自己完成的。)我按照說明在頂層路由中使用loadChildren讓每個模塊處理自己的路由:
app.routes.ts
import { Routes } from '@angular/router';
import { NotFoundComponent } from './utility/not-found.component';
export const appRoutes: Routes = [
{
path: 'events',
loadChildren: './events/events.module#EventsModule'
},
{ path: 'user', loadChildren: './user/user.module#UserModule'},
{ path: 'NotFound', component: NotFoundComponent },
{ path: '', redirectTo: '/events', pathMatch: 'full' },
{ path: '**', component: NotFoundComponent }
];
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { appRoutes } from './app.routes';
import { AppComponent } from './app.component';
import { SharedModule } from './common/shared.module';
import { NavBarComponent } from './nav/navbar.component';
import { EventService } from './events/event.service';
import { ToastrService } from './common/toastr.service';
import { NotFoundComponent } from './utility/not-found.component';
import { UserModule } from './user/user.module';
import { EventsModule } from './events/events.module';
@NgModule({
declarations: [
AppComponent,
NavBarComponent,
NotFoundComponent
],
imports: [
BrowserModule,
SharedModule,
EventsModule,
UserModule,
RouterModule.forRoot(appRoutes)
],
providers: [
EventService,
ToastrService
],
bootstrap: [AppComponent]
})
export class AppModule { }
然后,據推測,如果我希望/ events顯示事件列表, / events / create顯示用於輸入新事件的頁面, / events / 3顯示ID = 3的事件的詳細信息,下列。 根據該課程,在Angular自己對此主題的論述中得到佐證,我只應指定子路徑,而忽略“事件”段,該段應該已經由應用程序級路由解決了。
來自event.routes.ts
export const eventRoutes: Routes = [
{ path: 'create', component: CreateEventComponent, canDeactivate: [UnsavedNewEventGuard] },
{ path: ':id', component: EventDetailsComponent, canActivate: [ValidEventGuard] },
{ path: '', component: EventsListComponent }
];
events.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { eventRoutes } from './event.routes';
import { EventsListComponent } from './event-list/events-list.component';
import { CreateEventComponent } from './create-event/create-event.component';
import { EventThumbnailComponent } from './event-list/event-thumbnail.component';
import { EventDetailsComponent } from './event-details/event-details.component';
@NgModule({
declarations: [
EventsListComponent,
CreateEventComponent,
EventThumbnailComponent,
EventDetailsComponent,
],
imports: [
CommonModule,
RouterModule.forChild(eventRoutes)
]
})
export class EventsModule { }
這行不通。 而是直接顯示路徑/的事件列表(即, https:// localhost:4200 / ,它不會重定向)。 它不會路由到/ events,/ events / create或/ events / 3。
當我提供完整的路徑,包括我認為我本不應該使用的“事件”部分時, 該應用程序便可以正常工作 :
event.routes.ts (版本2)
export const eventRoutes: Routes = [
{ path: 'events/create', component: CreateEventComponent, canDeactivate: [UnsavedNewEventGuard] },
{ path: 'events/:id', component: EventDetailsComponent, canActivate: [ValidEventGuard] },
{ path: 'events', component: EventsListComponent }
];
另外,也可以將子路徑嵌套到“事件”的父路徑下的子屬性中:
event.routes.ts (版本3)
export const eventRoutes: Routes = [{
path: 'events', children: [
{ path: 'create', component: CreateEventComponent, canDeactivate: [UnsavedNewEventGuard] },
{ path: ':id', component: EventDetailsComponent, canActivate: [ValidEventGuard] },
{ path: '', component: EventsListComponent }
]
}];
但是無論版本2和3 是否起作用, 無論我的應用程序級路由文件中是否具有帶有loadChildren屬性的路由 。 該應用程序對此非常滿意:
app.routes.ts (版本2)
import { Routes } from '@angular/router';
import { NotFoundComponent } from './utility/not-found.component';
export const appRoutes: Routes = [
{ path: 'NotFound', component: NotFoundComponent },
{ path: '', redirectTo: '/events', pathMatch: 'full' },
{ path: '**', component: NotFoundComponent }
];
基本上,將忽略loadChildren路由。 (同樣適用於用戶模塊。)我不知道為什么。
您正在在app.module.ts上導入模塊。 之所以“版本2和版本3”起作用的原因是,模塊已導入AppModule
。 偷懶加載工作,你需要刪除EventsModule
和UserModule
從您AppModule
:
@NgModule({
declarations: [...],
imports: [
BrowserModule,
SharedModule,
RouterModule.forRoot(appRoutes)
],
providers: [...],
bootstrap: [AppComponent]
})
export class AppModule { }
另外,您可能需要在添加新模塊以延遲加載后重新運行ng serve
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.