Модуль анимации вложенных компонентов - PullRequest
Новая
       26

Модуль анимации вложенных компонентов

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

Я хотел бы добавить анимацию в мои ленивые загруженные маршруты модулей.

Мои маршруты выглядят так. 

{
  const appRoutes: Routes = [
    { path: '', component: StartComponent, pathMatch: 'full' },
    {
      path: '/',
      component: DefaultComponent,
      child: [{
        { path: 'child', component: ChildComponent },
      }]
    }
  ];
}

В моем компоненте по умолчанию у меня есть этот код: 

<div [@routeAnimations]="prepareRoute(outlet)" >
  <router-outlet #outlet="outlet"></router-outlet>
</div>

Я хочу, чтобы моя анимация работала между начальным и дочерним компонентами, но она не работает, потому что startComponent не отображается внутри маршрутизатора-розетки. Если я добавлю startComponent к дочернему элементу DefaultComponent, он будет работать, но затем мне придется добавить новый путь к startcomponent в URL, и я не хочу этого.

/ login => render startComponent / login /child => рендеринг дочернего компонента

Между этими маршрутами я хотел бы сделать анимацию.

Можно ли как-нибудь это сделать? Может быть, у defaultComponent есть содержимое startComponent? а затем сделать анимацию между <=> дочерним по умолчанию?

Спасибо за любую помощь.

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

1 Ответ

0 голосов
/ 01 ноября 2019

Это сработало, поэтому StartComponent отображается без указания пути в URL. и анимация работает как надо. 

const routes: Routes = [
  {
    path: '',
    component: DefaultComponent,
    children: [
      {
        path: '',
        component: StartComponent,
        data: { animation: 'Start' },
      },
      {
        path: 'failure',
        component: FailureComponent,
        data: { animation: 'Failure' },
      },
    ],
  },
];
...