0

当我想使用 'ng build --prod' 构建我的 Angular 应用程序时出现错误：

src/app/route-animations.ts(15,9) 中的错误：不支持“slideTo”表达式表单的模板编译期间出错。src/app/route-animations.ts(20,15)：不支持“slideTo”表达式表单的模板编译期间出错。src/app/route-animations.ts(24,39)：不支持“slideTo”表达式表单的模板编译期间出错。src/app/route-animations.ts(27,39)：不支持“slideTo”表达式表单的模板编译期间出错。src/app/route-animations.ts(15,9)：不支持“slideTo”表达式形式的模板编译期间出错。src/app/route-animations.ts(20,15)：不支持“slideTo”表达式表单的模板编译期间出错。src/app/route-animations.ts(24,39)：“slideTo”模板编译期间出错 不支持表达式形式。src/app/route-animations.ts(27,39)：不支持“slideTo”表达式表单的模板编译期间出错。

我真的不知道如何解决这个问题。

我已经在我的应用程序中添加了路由器动画，如下所示：

<div [@routeAnimations]="prepareRoute(outlet)" style="height: 100%">
  <router-outlet #outlet="outlet"></router-outlet>
</div>

import { slider } from './route-animations';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [ 
    slider
  ]
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    ...
  }

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

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

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

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

1 回答 1

1

您想要的并不完全可能，因为动画不是装饰器模式语法的功能，但可能有一种方法可以重用某些动画，但关于此的文章非常有限。

使用可以从每个过渡选项传递的插值变量创建可重用动画

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

// Reusable animation
export const slideAnimation = animation([
  query(':enter, :leave', [
    style({
      position: 'absolute',
      top: 0,
      left: '{{left}}',
      width: '100%'
    })
  ], { optional: true }),
  query(':enter', [
    style({ left: '-{{left}}' })
  ]),
  group([
    query(':leave', [
      animate('600ms ease', style({ left: '{{left}}' }))
    ], { optional: true }),
    query(':enter', [
      animate('600ms ease', style({ left: '{{left}}' }))
    ])
  ]),
]);


export const slider = trigger('routeAnimations', [
  transition('isRight => isLeft', [useAnimation(slideAnimation, { params: { left: '0%', time: '2s' } })]),
  transition('isLeft => isRight', [useAnimation(slideAnimation, { params: { direction: '100%', time: '2s' } })])
]);

发布的解决方案与您目前所拥有的不完全一样，这指向了正确的方向，我希望您可以让它发挥作用

参考：https ://angular.io/guide/reusable-animations

于 2019-09-09T06:17:51.233 回答