当用户点击浏览器后退按钮时，Angular 2在路径之间反转幻灯片动画

Question

我想用幻灯片动画为路线变化添加动画效果。当用户前进时，幻灯片从右向左滑动，当用户点击浏览器后退按钮时，我想恢复此动画，从左到右。

但我不知道如何获取浏览器按钮事件点击并在routerPageTransition中调用逆动画。

路由器page.animations.ts

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

export function routerPageTransition() {
  return slideToLeft();
}

function slideToRight() {
      // This has the opposite animation of slideToLeft
}

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

每个组件

：

import { Component, OnInit } from '@angular/core';
import { routerPageTransition } from './../../router-page.animations';

@Component({
  selector: 'test',
  templateUrl: './test.component.html',
  animations: [routerPageTransition()],
  host: {'[@routerPageTransition]': '' }
})
export class TestComponent    {

  /****************************
   * Constructor
  ****************************/
  constructor() { }

}

我如何处理router-page.animations.ts根据导航方向（前进或后退导航）应用于组件的不同动画？