Angular 9 - роутер-розетка для детского макета компонентов и содержимого страницы - PullRequest
Новая
       11

Angular 9 - роутер-розетка для детского макета компонентов и содержимого страницы

0 голосов
/ 10 марта 2020

Я разрабатываю приложение, в котором мне нужны разные макеты страниц в зависимости от маршрута, в котором я сейчас нахожусь. В частности, у меня есть компонент BaseLayout, в который я хочу загрузить другие компоненты компоновки, а затем загрузить содержимое страницы. Вот пример: 

<mat-sidenav-container class="example-sidenav-container">
  <mat-sidenav #snav mode="'over'" fixedInViewport [fixedTopGap]="isXSmall ? 56 : 64">
     // Sidenav content
  </mat-sidenav>

  <mat-sidenav-content>
     // load this components depending on route
     <app-toolbar></app-toolbar> // load toolbar depending on route
     <app-header></app-header> // load header depending on route
     <app-content></app-content> // contains a router-outlet where I want to display page content
  </mat-sidenav-content>
</mat-sidenav-container>

Так, например: когда я перехожу к / home, я хочу этот макет, где отображаются только панель инструментов и контент. Вот мой app.route: 

export const AppRoutes: Routes = [
  {
    path: 'home',
    component: BaseLayoutComponent,
    loadChildren: () => import('./main/pages/home/home.module').then(m => HomeModule)
  }
]

А вот мой home.routes: 

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  }
];

Моя проблема заключается в динамической загрузке отдельных частей макета BaseLayout. Я не уверен, какая должна быть оптимальная конфигурация маршрутов.

РЕДАКТИРОВАТЬ: Это то, что я пытался: app.routes: 

{
    path: 'home',
    component: BaseLayoutComponent,
    children: [
    {
       path: '',
       component: ToolbarComponent,
       outlet: 'toolbar'
    },
    {
       path: '',
       component: HeaderComponent,
       outlet: 'header'
    },
    {
       path: '',
       loadChildren: () => import('./main/pages/home/home.module').then(m => HomeModule)
  }
]

}

И в моем BaseLayoutComponent html: 

<mat-sidenav-container class="example-sidenav-container">
  <mat-sidenav #snav mode="'over'" fixedInViewport [fixedTopGap]="isXSmall ? 56 : 64">
     Sidenav content
  </mat-sidenav>

  <mat-sidenav-content (scroll)="onScroll($event)">
      <router-outlet name="toolbar"></router-outlet>
      <router-outlet name="header"></router-outlet>
      <app-content></app-content>
  </mat-sidenav-content>
</mat-sidenav-container>

Это работает, но опять же я не уверен, что это правильный подход.

...