javascript - 在动画定义文件中获取服务

Question

我的主页上有一个元素，其 CSS 变换 Angular 是根据视口(viewport)尺寸动态计算的。这些计算是在单独的服务中完成的。

该元素也是我的路由动画的一部分，我有一个单独的定义文件。我想在这些动画定义中使用计算出的 Angular ，但我不知道如何实现这一点，因为没有构造函数可以注入(inject)服务。

有没有办法从动画定义文件访问服务？

谢谢!

Answer 1

我不确定我是否正确理解了您的问题(如果没有理解，请告诉我)。我认为没有办法按照您建议的方式实现这一点，您可以做的是(为了简单起见，我使用宽度和高度而不是变换 Angular ):

选项 1。

我相信您的问题使用的一种方法是 Reusable animations ，按如下方式使用:

动画.ts

export const animation = trigger('animation', [
  transition('* <=> *', [
    query('.element', style({ height: '{{height}}', width: '{{width}}' })),
]),

app.component.ts

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

  constructor(private elementSize: ElementSizeService) { }

  height: string;
  width: string;

  ngOnInit() {
    this.elementSize.getSize$.subscribe((x: { height: string, width: string }) => {
      this.height = this.height;
      this.width = this.width;
    })
  }

  public prepareRoute(outlet: RouterOutlet) {
    const state = outlet && outlet.activatedRouteData && outlet.activatedRouteData['state'];
    return { value : state ? state : null, params: { width: this.width, height: this.height } };
  }

app.component.html

<div [@animation]="prepareRoute(o)">
  <router-outlet #o="outlet"></router-outlet>
</div>

选项 2。

另一种方法是使用 AnimationBuilder ,

AnimationBuilder - An injectable service that produces an animation sequence programmatically within an Angular component or directive. Provided by the BrowserAnimationsModule or NoopAnimationsModule.

您可以使用 AnimationBuilder，而不是使用触发器和状态，它可以简化事情，我相信它最适合此类情况，保留动画的最终结果。

app.component.ts

import { Component, ElementRef } from '@angular/core';
import { AnimationBuilder, animate, style } from '@angular/animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  @ViewChild('element') element: ElementRef;
  animationPlayer: any;
  height: string;
  width: string;

  constructor(private animBuilder: AnimationBuilder, private elementSize: ElementSizeService) {
    this.elementSize.getSize$.subscribe((x: { height: string, width: string }) => {
      this.height = this.height;
      this.width = this.width;
    })
  }

  makeAnimation() {
    const animation = this.animBuilder.build([
      animate(1000, style({
        width: this.width,
        height: this.height,
      }))
    ]);

    this.animationPlayer = animation.create(this.element.nativeElement);
    this.animationPlayer.onDone((x) => { });
    this.animationPlayer.play();
  }
}