Дочерние маршруты не анимируются при маршрутизации на другой родительский маршрут

Question

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

В основном маршрутизация анимации работает должным образом на маршрутах "того же уровня" (родитель -> родитель), дочерний -> (другой дочерний объект в том же родительском маршруте), но когда я переключаю маршрут на другого родителя, дочерний маршрут не анимируетсявыкл (не делать этого: оставить анимацию) и просто мгновенно покинуть дом (https://streamable.com/co0gs - пример - сначала показаны анимации между дочерними маршрутами и показаны проблемы при нажатии на маршрут «Kalendarz»).

Я считаю, что моя проблема в том, что я неправильно понимаю запросы анимации, но если вы просто укажете мне правильное направление, я надеюсь, я решу эту проблему самостоятельно:)

Вот несколько файлов для вашегоудобство:

Репозиторий проекта: https://github.com/Micozus/Pawganiser-front/

Файл анимации: https://github.com/Micozus/Pawganiser-front/blob/master/src/app/animations/animations.ts

Модуль маршрутов: https://github.com/Micozus/Pawganiser-front/blob/master/src/app/app-routing.module.ts

Родительский компонент маршрута: https://github.com/Micozus/Pawganiser-front/blob/master/src/app/app.component.html

Компонент дочерних маршрутов: https://github.com/Micozus/Pawganiser-front/blob/master/src/app/main-functions/my-pets/my-pets.component.html

Answer 1

@ PawełMikos обычно это обходной путь, но не решение. Я бы заменил дочерние маршруты на родительский уровень следующим образом:

const routes: Routes = [
  {path: '', redirectTo: '/login', pathMatch: 'full'},
  {
 path: 'my-pets', component: MyPetsComponent, data: {animation: 'PetPage'},
 path: 'my-pets/start', component: PetStartComponent, data: {animation: 'PetStartPage'}
 path: 'my-pets/list', component: PetsListComponent, data: {animation: 'PetListPage'},
// more child routes
  ,
  {path: 'calendar', component: PetCalendarComponent, data: {animation: 'CalendarPage'}},
  {path: 'search-nearby', component: PetNearbyComponent, data: {animation: 'SearchPage'}},
  {path: 'settings', component: SettingsComponent, data: {animation: 'SettingsPage'}},
  {path: 'login', component: LoginComponent, data: {animation: 'LoginPage'}}
];