html - angular - animația rutei se declanșează doar la reîmprospătarea paginii

Am o situație în care animația pe care am configurat-o pentru rute se declanșează doar când pagina browser-ului este reîncărcată. Când navighez la rute diferite în aplicație, animațiile nu sunt aplicate.

Acesta este router-animations.ts al meu:

import {
    trigger,
    transition,
    style,
    animate,
    state 
} from '@angular/animations';

export function slideLeft() {
    return slide();
}

function slide() {
    return trigger('slide', [
        state('void', style({ position: 'absolute', width: '100%' })),
        state('*', style({ position: 'absolute', width: '100%' })),
        transition('void => *', [
            style({ transform: 'translateX(100%)', opacity: 0 }),
            animate(
                '1s ease-in-out',
                style({ transform: 'translateX(0%)', opacity: 1 })
            ),
        ]),
        transition('* => void', [
            style({ transform: 'translateX(0%)', opacity: 1 }),
            animate(
                '1s ease-in-out',
                style({ transform: 'translateX(-100%)', opacity: 0 })
            ),
        ]),
    ]);
}

Fișierul meu app.component.html:

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

app.component.ts:

import { slideLeft } from './router-animations'

@Component({
  selector: 'app-root',
  animations: [slideLeft()],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})

export class AppComponent {
  title = 'ShopCompanionApp';

  prepareRoute(outlet: RouterOutlet) {
      return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
  }
}

În cele din urmă, iată rutele mele:

const appRoutes: Routes = [
    { path: "", component: LoginShopComponent },
    { path: "login/store", component: LoginShopComponent },
    { path: "login/account", component: LoginAccountComponent },
    { path: "mystore/manage", component: SlotsManagementComponent, canActivate: [AuthGuard] },
    { path: "mystore/orders", component: OrdersComponent, canActivate: [AuthGuard] },
    { path: "mystore/orders/:id", component: OrderDetailsComponent, canActivate: [AuthGuard] },
    { path: "**", redirectTo: "mystore/manage", pathMatch: "full" }
]

Ce îmi scapă aici?

Mulțumesc anticipat.

Răspuns #1

Nu sunt 100% sigur cu privire la specificații, dar ai putea încerca să asculți pentru schimbările de rută și să aplici animația dacă URL-ul corespunde criteriilor tale.

Am eliminat prepareRoute și l-am înlocuit cu o variabilă shouldSlide în schimb.

<div [@slide]="shouldSlide" >
    <router-outlet #outlet="outlet"></router-outlet>
</div>

import { Router, NavigationEnd } from '@angular/router';
export class AppComponent {
  title = 'ShopCompanionApp';
  shouldSlide = false;

  constructor(private router: Router) {
    router.events.subscribe((evt) => { // will trigger each time there's a route change.
      if(evt instanceof NavigationEnd){
        this.shouldSlide = evt.url.match('animation');
      }
    });
  }
  
  // TODO unsubscribe when the component is destroyed
}