我尝试将延迟加载添加到现有的angular(cli:7.2.0)项目中。在这个项目中,我使用多路径。我尝试了许多选择,但没有一个能完全起作用。
现在可以进行延迟加载,但是路由不再有效。我必须如何调用多个路由,才能在命名的路由器出口中显示它们。
链接就是这样:Server /#/ main /(personalcentral:personalcentralsite // start:startsite)
app.module.ts
try:
person = Person.get(
(Person.first_name == 'John') &
(Person.last_name == 'Lennon'))
except Person.DoesNotExist:
person = Person.create(
first_name='John',
last_name='Lennon',
birthday=datetime.date(1940, 10, 9))
app-routing.module.ts
@NgModule({
declarations: [
AppComponent,
...
],
imports: [
AppRoutingModule,
...
]
app.component.html
const routes: Routes = [
{
path: '',
loadChildren: './login/login.module#LoginModule'
},
{
path: '',
loadChildren: './member/mainpage.module#MainpageModule'
}
];
@NgModule({
imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
exports: [RouterModule]
})
export class AppRoutingModule { }
mainpage.module.ts
<router-outlet>
</router-outlet>
mainpage.route.ts
@NgModule({
declarations: [
MainpageComponent
],
imports: [
MainpageRoute
]
mainpage.component.ts
const routes: Routes = [
{
path: 'main',
component: MainpageComponent,
children: [
{
path: '',
loadChildren: () => StartsiteModule
},
{
path: '',
loadChildren: () => PersonalcentralModule
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class MainpageRoute {}
mainpage.component.html
...
this.cla_Router.navigate([{ outlets: {'start': ['startsite'] } }]);
...
this.cla_Router.navigate([{ outlets: {'personalcentral': ['personalcentralsite'] } }]);
...
startsite.module(甚至更多)
<router-outlet name="start"></router-outlet>
<router-outlet name="personal"></router-outlet>
startsite.route.ts(甚至更多)
@NgModule({
declarations: [StartsiteComponent],
imports: [
StartsiteRoute
]