选项1。

Question

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

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

是否可以通过动画定义文件访问服务？

谢谢！

Answer 1

我不确定我是否正确理解了您的问题（如果不正确，请告诉我）。我认为没有一种方法可以按照您的建议来实现，您可以做的是（为了简单起见，我使用宽度和高度而不是变换角度）：

选项1。

我相信您的问题的一种解决方法是使用Reusable animations，方法如下：

animation.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 -一种可注入的服务，可在Angular组件或指令中以编程方式生成动画序列。由BrowserAnimationsModule或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();
  }
}

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

1 个答案:

选项1。

选项2。