javascript - Angular 动画 : respond to numeric value change

Question

我想使用 Angular 动画根据 slider 的值旋转图像。我可以使用值更改通知程序触发动画:增量和减量。但不能在动画样式 block 中使用 css 属性中的最新值。

到目前为止我的代码是这样的-

用于在模板中绑定(bind)-

<mat-slider [(ngModel)]="rotationAngle" ...>
<img [@photoState]="rotationAngle" src="...">

在组件类声明中-

  rotationAngle: number = 0;

  constructor() { }

  ngOnInit() {
    this.rotationAngle = 0;
  }

  get stateName() {
    return this.rotationAngle;
  }

现在在@Component block 中-

animations: [
     trigger('photoState',
       [
          transition(':increment, :decrement', [
                    style('*'),
                    animate('500ms', style({transform: 'rotate({{ rotationAngle }}deg)'}))
              ],{
                  params: {
                    rotationAngle:  ... /* need to use the slider value here, I assume. Any other way? */
                  }
              })
        ])
  ]

有什么办法吗？我是否应该尝试一些其他方法，例如 AnimationBuilder(也许)？

Answer 1

我尝试使用 Angular 动画旋转一个 div，基本上我遵循了父子组件关系，其中父级传递 Angular 用于旋转 div，哪个子级使用 @Input 接受它并且我使用了该值在动画中，旋转

这里的链接你可以看看https://stackblitz.com/edit/angular-animations-params

我的错我没有遵循正确的命名约定.....