我如何正确同时使用loadchildren,多路由和延迟加载

时间:2019-05-16 07:57:58

标签: angular lazy-loading angular-router angular-module angular-load-children

我尝试将延迟加载添加到现有的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
    ]

0 个答案:

没有答案