angular4 如何在全局设置路由跳转动画的方法

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';@NgModule({ imports: [  BrowserAnimationsModule

import { AnimationEntryMetadata, state } from '@angular/core';import { trigger, transition, animate, style, query, group } from '/@angular/animations';export const routeAnimation: AnimationEntryMetadata = trigger('routeAnimation', [  transition(':enter', [   style({    position: 'absolute'   }),   animate('0.5s ease-in-out')  ]),  transition('* => *', [   query(':leave', style({ transform: 'translateX(0)', position: 'absolute'}), { optional: true }),   query(':enter', style({ transform: 'translateX(100%)', position: 'absolute'}), { optional: true }),   group([    query(':leave', animate('.5s ease-in-out', style({transform: 'translateX(-100%)'})), { optional: true }),    query(':enter', animate('.5s ease-in-out', style({transform: 'translateX(0)'})), { optional: true })   ])  ]) ]);

import { Router, NavigationEnd } from '@angular/router';import { routeAnimation } from './animations';@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.less'], animations: [routeAnimation]})// router跳转动画所需参数 routerState: boolean = true; routerStateCode: string = 'active';this.router.events.subscribe(event => {   if (event instanceof NavigationEnd) {    // 每次路由跳转改变状态   this.routerState = !this.routerState;   this.routerStateCode = this.routerState ? 'active' : 'inactive';   }  });

<div id="app" [@routeAnimation]="routerStateCode"> <router-outlet></router-outlet></div>