HostBinding 未绑定到 CSS 变量

Question

我正在尝试将 angular 组件中的变量绑定到 CSS 关键帧内的变量，我正在使用该关键帧动态设置 div 动画。我发现 HostBinding 作为一个潜在的解决方案但是我（认为）我正确地遵循了声明但是当使用变量时动画不起作用。我正在使用 angular 10.0.14 任何帮助表示赞赏。

这是我的 css 代码：

@keyframes swap{
  0%{background-color:red; left: var(--inX);} 
  100%{background-color: red; left: var(--finX);}
}

这是我的 component.ts HostBinding 声明：

@Component({
  selector: 'app-',
  templateUrl: './component.html',
  styleUrls: ['./component.css'],

})
export class Component implements OnInit {

  @HostBinding('style.--inX')
  private inX: string = '100px';
  
  @HostBinding('style.--finX')
  private finX:string = '200px';
}

Answer 1

现在 css 有问题，但主机将自定义 css 变量的名称从 --inX 更改为 --in-x。

所以要解决只需将自定义 css 变量名称更改为单个单词或 --in-x

})
export class AppComponent {
  name = "Angular " + VERSION.major;

  @HostBinding("style.--start")
  private inX: string = "50px";

  @HostBinding("style.--end")
  private finX: string = "200px";
}

stackblitz demo

如果您想对变量名称使用 camelCase 样式，您需要将样式直接设置为对象，但我仍然推荐以前的解决方案，因为它很容易更新单个属性直接。

  @HostBinding("style")  private style = {
    '--intX':'100px',
    '--finX':'200px'
  }

stackblitz demo

HostBinding 未绑定到 CSS 变量

HostBinding not binding to CSS variable

css

angular

angular2-hostbinding