根据以前的路径页面添加不同的动画

Question

我需要一个组件（品牌名称）来基于以前的角度路线进行动画制作。也就是说，当前一条路线回家时，应该从右侧加载组件，如果前一条路线是品牌模型，那么组件应该从左侧加载。我想在组件本身中添加动画代码。

我可以使用该服务获取组件中的上一个路由

import { Injectable } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class RouteService {

 private previousUrl: string;
 private currentUrl: string;

 constructor(private router: Router) {
   this.currentUrl = this.router.url;
   router.events.subscribe(event => {
     if (event instanceof NavigationEnd) {
       this.previousUrl = this.currentUrl;
       this.currentUrl = event.url;
     }
   });
 }

 public getPreviousUrl() {
   return this.previousUrl;
 }
}

但加载页面后无法动画。有没有办法实现这个目标？

Answer 1

一般信息：您的动画需要一些状态，可用于将页面向左或向右转换。路由器希望提供有关导航方向的信息。这总取决于您在内部实施浏览器的方式。

想法1：

通过检查路由参数的数量来获取动画方向，并将它们与之前的参数进行比较（查找路径中的/的数量）。

想法2：

Fill in the router with extra informations

动画实现：

state('neutral', style({transform: 'translateX(0%)'}),
state('up',  style({transform: 'translateX(-100%)'}),
state('down',  style({transform: 'translateX(100%)'}),
transition('neutral => up', animate('500ms')),
transition('up => neutral', animate('500ms')),
transition('neutral => down', animate('500ms')),
transition('down => neutral', animate('500ms'))