角动画不使用'void => *或'* => void'触发

Question

我一直在尝试使角度动画能够与路线配合使用，所以我尝试了角度路线过渡动画。当使用transition（'* => *'）...时，代码会执行，但是在尝试获取'void => *'时，反之亦然，代码根本无法工作。没有动画发生。请帮忙！

我的app.component.ts是：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [getRoutingTrigger()]
})
export class AppComponent {
  title = 'screen-transition';
  in = "in";
  getRoutingState(outlet: RouterOutlet): string {
    console.log( outlet.activatedRouteData.state);
    return outlet.activatedRouteData.state;
  }
}

我的html文件是：

<div class = "main">
    <a class="btn btn-info my-1" routerLink="/routeToComponent">Route To Component</a>
    <a class="btn btn-info my-1" routerLink="/secondRoute">Second Route</a>
    <a class="btn btn-info my-1" routerLink="/thirdRoute">Third Route</a>
    <a class ="btn btn-info my-1" routerLink="/firstRoute">FirstRoute</a>

    <div [@routing]="getRoutingState(outlet)" class="main-container">
        <router-outlet #outlet="outlet"></router-outlet>
    </div>
    <div style="background-color: brown" class="my-3">
    </div>
</div>

我的router.module.ts是

const routes: Routes = [
    {path: 'routeToComponent' , component: RouteToComponent, data: {state: 'routeToComponent'}},
    {path: 'secondRoute', component: SecondRouteComponent, data: {state: 'secondRoute'}},
    {path: 'thirdRoute', component: ThirdRouteComponent, data: {state: 'thirdRoute'}},
    {path: 'firstRoute', component: FirstComponent, data: {state: 'firstRoute'}}
  ];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule{}

我的动画文件是：

import {
trigger,
animate,
transition,
style,
query,
group,
useAnimation,
animation,
AnimationTriggerMetadata,
state
} from '@angular/animations';

const commonStyles = {
  position: 'absolute',
  width: '100%'
};
const slideBackwards = animation([
  query(':leave', [
      style([commonStyles, { transform: 'translateX(0%)' }])
  ], { optional: true }),
  query(':enter', [
      style([commonStyles, { transform: 'translateX(-200%)' }])
  ], { optional: true }),
  group([
      query(':leave', [
          animate('1000ms ease-out',
              style({ transform: 'translateX(200%)' })
          )
      ], { optional: true }),
      query(':enter', [
          animate('1000ms ease-out',
              style({ transform: 'translateX(0%)' }))
      ], { optional: true })
  ])
]);

const slideForward = animation([
  query(':leave', [
      style([commonStyles, { transform: 'translateX(0%)' }])
  ], { optional: true }),
  query(':enter', [
      style([commonStyles, { transform: 'translateX(200%)' }])
  ], { optional: true }),
  group([
      query(':leave', [
          animate('1000ms ease-in-out',
              style({ transform: 'translateX(-200%)' })
          )
      ], { optional: true }),
      query(':enter', [
          animate('1000ms ease-in-out',
              style({ transform: 'translateX(0%)' }))
      ], { optional: true })
  ])
]);

export function getRoutingTrigger(): AnimationTriggerMetadata {

  return trigger('routing', [
    transition("void => *", [useAnimation(slideForward)]),//doesnt work

    transition('* => void', [useAnimation(slideBackwards)]),//doesnt work

    transition('* => *', [useAnimation(slideBackwards)])//only the one that works.
    //if i remove the last one nothing happens 

  ]);
}