css - Angular 6，如何根据变量(连续变化)更改 img 的样式(旋转、颜色、比例)

Question

在 Angular 中更改元素或组件的样式我知道有以指令形式提供的工具(ngStyle、ngClass)。然而，据我所知，ngClass 仅允许条件样式，其中一个人根据特定场景更改样式。因此，这些是基于离散条件的变化。

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

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

在 Angular 中，这将如何完成？ ViewChild 允许访问 DOM，因此可以访问样式，但样式在计算时看起来是只读的。

我无法发布代码，因为我不知道从哪里开始才能让这样的东西发挥作用。

Answer 1

but then ngStyle is listening perpetually to page changes, whereas I wish to trigger the style change when a specific action occurs, instead of listening to all page changes if possible?

这就是 Angular 的全部要点:您通过它提供的声明性模板语法将数据绑定(bind)到 View ，并让它确定何时更新。

如果您尝试通过手动了解数据更改时间来触发更新，则您可能做错了什么(或者您正在优化库的特定部分)。让 Angular 进行更新是正确的做法。

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

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