@ angular / компонент маршрута маршрутизации в маршрутизаторе-розетке для стилизации - PullRequest
Новая
       30

@ angular / компонент маршрута маршрутизации в маршрутизаторе-розетке для стилизации

0 голосов
/ 24 октября 2019

У меня есть простое угловое (8 +) приложение, использующее @angular/router с несколькими компонентами в качестве маршрутов, и каждый компонент использует @angular/animations для переходов.

<router-outlet> директива isполноэкранный режим с использованием css width: 100vw и height: 100vh для отмены прокрутки по умолчанию. Моя идея заключается в том, чтобы обернуть каждый маршрут <div> или определенным классом, который позволит определить фиксированный макет.

Моя текущая версия прекрасно работает, , но мне нужно вручную добавить <div> инадеялся найти автоматическое решение , как @angular/animations делает.

app.ts с основным маршрутизатором 

  <main [@routerTransition]="getState(o)">
    <router-outlet #o="outlet"></router-outlet>
  </main>

html-шаблон компонента маршрута 

<div class="route"> <!-- ? class which should be automatically wrapped -->
  <div class="container">
    <h1>title</h1>
    <p>Blablabla</p>
  </div>
</div>

Маршруты 

// State is use to bind animation
export const appRoutes: Routes = [
  {
    path: 'page1',
    loadChildren: () => import('./page1/page1.module').then(mod => mod.Page1Module),
    data: { theme: 'light' }
  },
  {
    path: 'page2',
    loadChildren: () => import('./page2/page2.module').then(mod => mod.Page2Module),
    data: { theme: 'light' }
  },
  ...
];

Как я уже сказал, этот код работает точно так же, как и ожидалось, но не нужно поддерживать вручную определенный макет DOM.

1 Ответ

1 голос
/ 24 октября 2019

Контентная проекция выполнит эту работу. По сути, у вас есть компонент оболочки / оболочки. И все ваши отдельные компоненты маршрута будут проецировать свое содержимое в эту оболочку / оболочку.

RouteShellComponent: 

<div class="route">
    <ng-content></ng-content>
</div>

RouteAComponent: 

<div class="container">
    <h1>title</h1>
    <div>...</div>
</div>

main 

<app-route-shell>
    <router-outlet></router-outlet>
</app-route-shell>
...