Angular 4.3新的路由器動畫不起作用

Question

我有一個新的Angular 4.3動畫的問題。我認爲我按照https://medium.com/@gerard.sans/angular-supercharge-your-router-transitions-using-new-animation-features-v4-3-3eb341ede6c8定義了一切正常，但是在補丁更改期間，此刻我沒有任何動畫。下面我展示我的動畫文件：

我的動畫：

import {trigger, stagger, animate, style, group, query, transition} from '@angular/animations'; 

export const routerTransition = trigger('routerTransition', [ 
    transition('* <=> *', [ 
    /* order */ 
    /* 1 */ query(':enter, :leave', style({ position: 'fixed', width:'100%' }) 
     , { optional: true }), 
    /* 2 */ group([ // block executes in parallel 
     query(':enter', [ 
     style({ transform: 'translateX(100%)' }), 
     animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' })) 
     ], { optional: true }), 
     query(':leave', [ 
     style({ transform: 'translateX(0%)' }), 
     animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' })) 
     ], { optional: true }), 
    ]) 
    ]) 
]); 

如果我改變了動畫到另一個我看到不同的動作，但我從來沒有取得良好的結果（全寬頁面動畫等）。我也得到這個錯誤，如果我刪除{可選：真正}從動畫代碼：

core.es5.js:1020 ERROR Error: Unable to process animations due to the following failed trigger transitions 
@routerTransition has failed due to: 
- `query(":enter")` returned zero elements. (Use `query(":enter", { optional: true })` if you wish to allow this.) 
- `query(":leave")` returned zero elements. (Use `query(":leave", { optional: true })` if you wish to allow this.) 

編輯：

我無法找到一個解決方案，所以我回老版本在各子控制器的動畫：

animations: [slideInOutAnimation], 
    host: { '[@slideInOutAnimation]': '' } 

如果有人發現了一個解決方案的請求發佈信息，我們怎樣才能使它更容易，只在一個地方，而不是每個控制器創建動畫。

Answer 1

我在AOT編譯中遇到了同樣的錯誤。我的解決方案：

import {animate, animateChild, group, query as q, sequence, state, style, transition, trigger} from '@angular/animations'; 

// this solves them problem 
export function query(s, a) { 
    return q(s, a, {optional: true}); 
} 

export const routerTransition = trigger('routerTransition', [ 
    transition('* => *', [ 
    query(':enter, :leave', style({position: 'fixed', width: '100%'})), 
    query(':enter', style({transform: 'translateX(100%)'})), 
    sequence([ 
     query(':leave', animateChild()), 
     group([ 
     query(':leave', [ 
      style({transform: 'translateX(0%)'}), 
      animate('400ms cubic-bezier(.75,-0.48,.26,1.52)', 
      style({transform: 'translateX(-100%)'})) 
     ]), 
     query(':enter', [ 
      style({transform: 'translateX(100%)'}), 
      animate('400ms cubic-bezier(.75,-0.48,.26,1.52)', 
      style({transform: 'translateX(0%)'})) 
     ]) 
     ]), 
     query(':enter', animateChild()) 
    ]) 
    ]) 
]);