角度6，如何根据变量（连续变化）更改img的样式（旋转，颜色，比例）

Question

我知道在Angular中可以更改元素或组件的样式，有一些工具可以使用指令（ngStyle, ngClass形式。但是，据我所知，ngClass仅允许条件样式，其中基于特定场景更改样式。因此，这些是基于离散条件的更改。

ngStyle允许传递一个对象，该对象在理论上可以通过返回自定义定义的样式对象来做到这一点，但是ngStyle会永久监听页面更改，而我希望触发发生特定操作时样式发生变化，而不是尽可能听所有页面更改？

我想基于按钮的按下或鼠标事件，或者只是在调用函数时，以编程方式更改图像的css属性（旋转，宽度，高度，不透明度），但是关键是我想要这些更改为连续的，例如，基于组件类中的变量的旋转，没有类的离散选项更改。

在Angular中，该怎么做？ ViewChild允许访问DOM，因此也可以访问样式，但是样式是只读的，在计算时似乎是只读的。

我无法发布代码，因为我不知道从哪里开始使这种事情起作用。

Answer 1

  

但是ngStyle会永久监听页面更改，而我希望在发生特定操作时触发样式更改，而不是尽可能听所有页面更改？

这就是Angular的全部要点：您可以通过它提供的声明性模板语法将数据绑定到视图，然后确定何时更新。

如果尝试通过手动知道数据何时发生更改来触发更新，则可能是做错了什么（或者您正在优化库的特定部分）。让Angular更新是正确的事情。

update () {
  this.styles = { /* ... */ }
}

<div [ngStyle]="styles">...</div>