HostBinding 未绑定到 CSS 变量答案

【问题标题】：HostBinding not binding to CSS variableHostBinding 未绑定到 CSS 变量
【发布时间】：2020-12-22 00:06:34
【问题描述】：

我正在尝试将我的角度组件中的变量绑定到 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';
}

【问题讨论】：

您能否分享更多代码，您是如何将所有这些应用在一起的，或者使用stackblitz.com创建一个演示

标签： css angular angular2-hostbinding

【解决方案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 ??

【讨论】：