Angular 8 BrowserAnimations 错误与 AOT

Question

我 route-animations.ts 有一些动画。当我运行带有 ng serve 的代码时它工作正常但是当运行 ng serve --prod 时我得到一个错误。


export const slider =
  trigger('routeAnimations', [
    transition('* => isLeft', slideTo('left') ),
    transition('* => isRight', slideTo('right') ),
    transition('isRight => *', slideTo('left') ),
    transition('isLeft => *', slideTo('right') )
  ]);

function slideTo(direction) {
  const optional = { optional: true };
  return [
    query(':enter, :leave', [
      style({
        position: 'absolute',
        top: 0,
        [direction]: 0,
        width: '100%'
      })
    ], optional),
    query(':enter', [
      style({ [direction]: '-100%'})
    ]),
    group([
      query(':leave', [
        animate('600ms ease', style({ [direction]: '100%'}))
      ], optional),
      query(':enter', [
        animate('600ms ease', style({ [direction]: '0%'}))
      ])
    ]),
  ];
}

我收到这个错误ERROR in src\app\app.component.ts(14,16): Error during template compile of 'AppComponent' Reference to a non-exported function in 'slider' 'slider' contains the error at src\app\animations\route-animations.ts(41,10).

import { Component } from '@angular/core';
import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
import { RouterOutlet } from '@angular/router';
import { slider } from './animations/route-animations';;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [slider]
})
export class AppComponent {
  constructor() { }

  prepareRoute(outlet: RouterOutlet) {
    return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
  }


}

Answer 1

解决方法很简单，我们只需要将导出的常量和函数合并为一个常量即可。

export const slider =
trigger('routeAnimations', [
  transition('* => isLeft', [
    query(':enter, :leave', [
      style({
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%'
      })
    ], { optional: true }),
    query(':enter', [
      style({ left: '-100%'})
    ]),
    group([
      query(':leave', [
        animate('600ms ease', style({ left: '100%'}))
      ], { optional: true }),
      query(':enter', [
        animate('600ms ease', style({ left: '0%'}))
      ])
    ]),
  ]),
  transition('* => isRight', [
    query(':enter, :leave', [
      style({
        position: 'absolute',
        top: 0,
        right: 0,
        width: '100%'
      })
    ], { optional: true }),
    query(':enter', [
      style({ right: '-100%'})
    ]),
    group([
      query(':leave', [
        animate('600ms ease', style({ right: '100%'}))
      ], { optional: true }),
      query(':enter', [
        animate('600ms ease', style({ right: '0%'}))
      ])
    ]),
  ]),
  transition('isRight => *', [
    query(':enter, :leave', [
      style({
        position: 'absolute',
        top: 0,
        right: 0,
        width: '100%'
      })
    ], { optional: true }),
    query(':enter', [
      style({ left: '-100%'})
    ]),
    group([
      query(':leave', [
        animate('600ms ease', style({ left: '100%'}))
      ], { optional: true }),
      query(':enter', [
        animate('600ms ease', style({ left: '0%'}))
      ])
    ]),
  ]),
  transition('isLeft => *', [
    query(':enter, :leave', [
      style({
        position: 'absolute',
        top: 0,
        right: 0,
        width: '100%'
      })
    ], { optional: true }),
    query(':enter', [
      style({ right: '-100%'})
    ]),
    group([
      query(':leave', [
        animate('600ms ease', style({ right: '100%'}))
      ], { optional: true }),
      query(':enter', [
        animate('600ms ease', style({ right: '0%'}))
      ])
    ]),
  ])
],
)```

Answer 2

对@KLTR 的解决方案稍作补充。如果你想在多个路由上添加相同的转换，而不创建另一个函数，可以按如下方式实现：下面的代码可用于在不同的路线上应用左过渡：

 export const slider =
  trigger('routeAnimations', [
  transition('route1 => route2, route3 => route4, route5 => route6', [
  query(':enter, :leave', [
    style({
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%'
  })
  ], { optional: true }),
  query(':enter', [
    style({ left: '-100%'})
  ]),
  group([
    query(':leave', [
    animate('600ms ease', style({ left: '100%'}))
  ], { optional: true }),
  query(':enter', [
    animate('600ms ease', style({ left: '0%'}))
  ])
  ]),
  ]),

同样，不同的转换可以组合在单个导出的常量中（如@KLTR 提到的）。

Answer 3

...显然，可以通过显式导出 slideTo 函数的专用 Left 和 Right 副本来实现更少的代码重复，如下所示：

export const slider =
  trigger('routeAnimations', [
    transition('* => isLeft', slideToLeft() ),
    transition('* => isRight', slideToRight() ),
    transition('isRight => *', slideToLeft() ),
    transition('isLeft => *', slideToRight() )
  ]);

const optional = { optional: true };

export function slideToLeft {
  return [
    query(':enter, :leave', [
      style({
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%'
      })
    ], optional),
    query(':enter', [
      style({ left: '-100%'})
    ]),
    group([
      query(':leave', [
        animate('600ms ease', style({ left: '100%'}))
      ], optional),
      query(':enter', [
        animate('600ms ease', style({ left: '0%'}))
      ])
    ]),
  ];
}

export function slideToRight {
  return [
    query(':enter, :leave', [
      style({
        position: 'absolute',
        top: 0,
        right: 0,
        width: '100%'
      })
    ], optional),
    query(':enter', [
      style({ right: '-100%'})
    ]),
    group([
      query(':leave', [
        animate('600ms ease', style({ right: '100%'}))
      ], optional),
      query(':enter', [
        animate('600ms ease', style({ right: '0%'}))
      ])
    ]),
  ];
}

Angular 8 BrowserAnimations 错误与 AOT

Angular 8 BrowserAnimations error with AOT

angular

angular-animations

angular2-aot