angular4 如何在全局設置路由跳轉動畫

最近用angular4寫項目須要爲每次路由跳轉增長動畫，看了一下官方文檔，雖然能夠實現，可是要每一個組件都引入一次animations，比較麻煩，找網上也查閱了不少資料，可是都沒找到適用的方法，最後本身寫了一種方法以下：

---

首先在app.module中導入BrowserAnimationsModule

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    BrowserAnimationsModule

在根目錄src/app/下建立一個animations.ts。內容以下，這裏我用到query和group是想兩個頁面來回切換有過分痕跡

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 })
      ])
    ])
  ]);

接着在app.component中使用 NavigationEnd 設置每次路由跳轉監聽的參數變化而且引入animations模塊

import { Router, NavigationEnd } from '@angular/router';
import { routeAnimation } from './animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less'],
  animations: [routeAnimation]
})
export class AppComponent {
    // router跳轉動畫所需參數
    routerState:boolean = true;
    routerStateCode:string = 'active';
    constructor(private router:Router){
        this.router.events.subscribe(event => {
          if (event instanceof NavigationEnd) {
          // 每次路由跳轉改變狀態
          this.routerState = !this.routerState;
          this.routerStateCode = this.routerState ? 'active' : 'inactive';
          }
        });
    }
}

最後在app.component.html中聲明路由動畫就能夠了

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

如今全局路由跳轉都有動畫了，不用一個一個組件導入animations。