使用样式属性动态设置 css 变量不起作用，Angular 8

Question

我试图将值从 style 属性传递给动画，但该值的动态设置不起作用。 我使用以下文章作为参考https://css-tricks.com/css-attr-function-got-nothin-custom-properties/

HTML：

      <div class="labelContainer">
        <p #label class="optionLabel" [ngClass]="{'optionLabel--animated': isSelected(option) && checkOverflow(label)}"
         [style]="labelOffset" >
          {{ option.label }}
        </p>
      </div>

TS：

  _labelOffset = `--labelOffset: '0px'`

  checkOverflow(label):boolean {
    if(label.offsetWidth < label.scrollWidth){
      let offset = label.scrollWidth - label.offsetWidth;
      this._labelOffset = `--labelOffset: '${offset}px'`;
      return true;
    }
      return false;
  }


  get labelOffset(){
    return this._labelOffset;
  }

CSS：

.optionLabel{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

  &--animated{
    animation: marquee 2s linear infinite;
    overflow: visible;
  }

  $labelOffset: var(--labelOffset);

  @keyframes marquee {
    0%{transform: translateX(0%);} 
    100% {transform: translateX($labelOffset);}
   }
}

编译后的 HTML：

<p _ngcontent-qfr-c26="" class="optionLabel optionLabel--animated" ng-reflect-klass="optionLabel" ng-reflect-ng-class="[object Object]" style="">very long text</p>

我尝试在传递值时使用 DomSanitizer，但这也不起作用。

Answer 1

最好的例子是

https://css-tricks.com/updating-a-css-variable-with-javascript/ https://davidwalsh.name/css-variables-javascript

尝试这个。

在 style.scss 全局文件中提供您的值

:root {
--labelOffset:0px;
}

在您的组件 ts 文件中如何获取变量值

let _labelOffset = getComputedStyle(document.documentElement).getPropertyValue('--my-variable-name');