这是我的Angular2应用程序结构:
这是我的代码的一部分。以下是Angular2应用程序的主要module
,它导入其路由规则和子模块(EdgeModule
)并使用与某些页面相关的一些组件。
app.module.ts
@NgModule({
declarations: [
AppComponent,
PageNotFoundComponent,
LoginComponent
],
imports: [
...
appRouting,
EdgeModule
],
providers: [
appRoutingProviders,
LoginService
],
bootstrap: [AppComponent]
})
export class AppModule {
}
以下是主模块的路由规则。它有登录页面和页面找不到的路径。
app.routing.ts
const appRoutes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: '**', component: PageNotFoundComponent }
];
export const appRoutingProviders: any[] = [];
export const appRouting = RouterModule.forRoot(appRoutes, { useHash: true });
这是EdgeModule
声明它使用的组件并导入自己的路由规则和2个子模块(FirstSectionModule
和SecondSectionModule
)。
edge.module.ts
@NgModule({
declarations: [
EdgeComponent,
SidebarComponent,
TopbarComponent
],
imports: [
...
edgeRouting,
FirstSectionModule,
SecondSectionModule
],
providers: [
AuthGuard
]
})
export class EdgeModule {
}
以下是加载模块的路由规则,如您所见,顶部栏和侧边栏组件。
edge.routing.ts
Paths['edgePaths'] = {
firstSection: 'firstSection',
secondSection: 'secondSection'
};
const appRoutes: Routes = [
{ path: '', component: EdgeComponent,
canActivate: [AuthGuard],
children: [
{ path: Paths.edgePaths.firstSection, loadChildren: '../somepath/first-section.module#FirstModule' },
{ path: Paths.edgePaths.secondSection, loadChildren: '../someotherpath/second-section.module#SecondModule' },
{ path: '', redirectTo: edgePaths.dashboard, pathMatch: 'full' }
]
}
];
export const edgeRouting = RouterModule.forChild(appRoutes);
最后,这是两个子模块之一,它有其组件并导入其路由规则。
第一section.module.ts
@NgModule({
declarations: [
FirstSectionComponent,
SomeComponent
],
imports: [
...
firstSectionRouting
],
providers: [
AuthGuard,
]
})
export class FirstSectionModule {
}
这些是FirstSectionModule
的页面(组件)的路由规则
第一section.routing.ts
Paths['firstSectionPaths'] = {
someSubPage: 'some-sub-page',
someOtherSubPage: 'some-other-sub-page'
};
const appRoutes: Routes = [
{
path: '',
children: [
{ path: Paths.firstSectionPaths.someSubPage, component: someSubPageComponent},
{ path: Paths.firstSectionPaths.someOtherSubPage, component: someOtherSubPageComponent},
{ path: '', component: AnagraficheComponent }
]
}
];
export const firstSectionRouting = RouterModule.forChild(appRoutes);
second-section.module.ts
和second-section.routing.ts
文件几乎一样。
当我运行应用程序时,首先加载的是与FirstSectionComponent
相关的页面,没有侧栏或顶栏。
你能告诉我我的代码有什么问题吗?控制台中没有错误。
你可以尝试使用loadChildren
,其中homeModule
,productModule
,aboutModule
有自己的路线规则。
const routes: Routes = [
{ path: 'home', loadChildren: 'app/areas/home/home.module#homeModule' },
{ path: 'product', loadChildren: 'app/areas/product/product.module#ProductModule' },
{ path: 'drawing', loadChildren: 'app/areas/about/about.module#AboutModule' }
];
export const appRouting = RouterModule.forRoot(routes);
家庭路线规则就像
export const RouteConfig: Routes = [
{
path: '',
component: HomeComponent,
canActivate: [AuthGuard],
children: [
{ path: '', component: HomePage },
{ path: 'test/:id', component: Testinfo},
{ path: 'test2/:id', component: Testinfo1},
{ path: 'test3/:id', component: Testinfo2}
]
}
];
这也称为延迟加载模块。
{ path: 'lazy', loadChildren: 'lazy/lazy.module#LazyModule' }
这里有一些重要的事情需要注意:我们使用属性loadChildren
而不是组件。我们传递一个字符串而不是一个符号,以避免急切地加载模块。我们不仅定义了模块的路径,还定义了类的名称。 LazyModule
没有什么特别之处,除了它有自己的路由和一个名为LazyComponent
的组件。
看看这个与此相关的精彩教程:https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html
在你的app.routing.ts中,只有2条路线,并且没有包含导航到主要部分的路线(如图所示)。需要有一个带有loadchildren属性的路由条目,因此它将加载Main部分的模块。
routes: Routes = [...
{
path: 'main', loadChildren: '<file path>/<Edge module file name>#EdgeModule'
}
...];
这将加载边缘模块内的其余模块,组件路径和所有内容。
不确定我是否正确地解决了问题,但这里是一个小代码片段,我用它来动态生成路由:
app.component.ts:
constructor(private _router: Router) {
}
ngOnInit() {
...
this._router.config[0].children = myService.getRoutes();
this._router.resetConfig(this._router.config);
console.debug('Routes:', this._router.config);
...
}
它不是OOTB解决方案,但您可以获得有关当前路线的信息。
这是依赖注入问题。我们不需要在edgeModule中注入FirstSectionModule和SecondSectionModule以及我们可以在FirstSectionModule和SecondSectionModule中使用的路由。所以只需从edgeModule中删除它就可以了。