css - Angular 将参数传递给 css 动画

Question

对于上面的动画 CSS 代码，我想知道是否有任何方法可以将 borderColor 和 width 的值作为参数从 TypeScript 传递。

CSS 代码

.app-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid gray;
  border-radius: 50%;
  animation: app-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: red transparent transparent transparent;
}

HTML代码

<div class="app-iconDiv">
</div>

Answer 1

这可以通过 ngStyle ( docs ) 实现。

例如，如果你想根据你的 CSS 使用 Angular 组件中的 borderColor 变量来设置 div 元素的样式，这是你的代码:

<div [ngStyle]="{'border-color': borderColor + ' transparent transparent transparent'}"></div>

如果要应用的样式很多，也可以在TypeScript类中创建一个对象，然后在ngStyle指令中引用这个对象。

HTML:

<div [ngStyle]="myStyle"></div>

TS:

this.myStyle = {
  'border-color': this.borderColor + ' transparent transparent transparent',
  // ...
}