Как правильно использовать loadchildren, multiroutes и lazy loading одновременно - PullRequest
Новая
       30

Как правильно использовать loadchildren, multiroutes и lazy loading одновременно

0 голосов
/ 16 мая 2019

Я пытаюсь добавить отложенную загрузку в существующий угловой проект (cli: 7.2.0). В этом проекте я использую мультируты. Я перепробовал много вариантов, но ни один не работал полностью.

Теперь ленивая загрузка работает, но маршрутов больше нет. Как я должен назвать несколько маршрутов, чтобы я мог показать их в названной розетке маршрутизатора.

Вот так должна выглядеть ссылка: Сервер / # / main / (personalcentral: personalcentralsite // start: launchite)

app.module.ts 

@NgModule({
  declarations: [
    AppComponent,  
    ...         
  ],
  imports: [
     AppRoutingModule,
     ...
  ]

приложение-routing.module.ts 

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 { }

app.component.html 

<router-outlet>
</router-outlet>

mainpage.module.ts 

@NgModule({
    declarations: [
        MainpageComponent        
    ],
    imports: [
        MainpageRoute       
    ]

mainpage.route.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.ts 

...
this.cla_Router.navigate([{ outlets: {'start': ['startsite'] } }]);
...
this.cla_Router.navigate([{ outlets: {'personalcentral': ['personalcentralsite'] } }]);
...

mainpage.component.html 

<router-outlet name="start"></router-outlet>
<router-outlet name="personal"></router-outlet>

setsite.module (даже больше) 

@NgModule({
    declarations: [StartsiteComponent],
    imports: [
       StartsiteRoute
    ]

startite.route.ts (даже больше) 

const routes: Routes = [
    {
        path: 'startsite',
        component: StartsiteComponent,
        outlet: 'start'
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class StartsiteRoute {}
...