Angular 2+ - 如何将变量传递给 SASS :before / :after 伪选择器

Question

在 Angular 2+ 中，我需要将存储在组件变量中的值传递给 :before 样式之一中使用的 CSS top 属性。在这种情况下，我不能直接使用 [ngStyle]，因为它不允许访问 CSS 伪选择器。我试图用它来影响这样的 CSS 变量：

HTML：

<div class="summaries-graph-box">
     <div class="summaries-graph">
          <div [ngStyle]="{'--odds-top-height': graphOddsTopHeight + 'px'}" 
               class="summary-graph-column summary-plan summary-odds">
                  <span class="summary-value">123</span>
          </div>                 
      </div>
</div>

TS：

graphOddsTopHeight = 40;

在我使用的 CSS 中：

 .summary-odds {
    --odds-top-height: 20px;
 }

  .summary-odds:before {
      min-height: 30px;
      top: var(--odds-top-height);
  }

CSS 变量正在工作，但该值仍然是 20px（最初在 CSS 中设置）而不是 40px（由组件变量提供）。

我也尝试过像这样使用 attr：

HTML：

 <div [attr.odds-top-height]="graphOddsTopHeight + 'px'" 
      class="summary-graph-column summary-plan summary-odds">
          <span class="summary-value">123</span>
 </div>                

然后在 CSS 中：

summary-odds:before {
    top: attr(odds-top-height);
}
//or
summary-odds:before {
    top: attr(data-odds-top-height);
}

但是，在这种情况下，浏览器会简单地忽略 top 属性并将其删除。

有谁知道我的代码有什么问题，或者我还能做些什么来将变量从组件传递到 CSS :before 伪选择器？

Answer 1

你应该使用绑定指令，像这样：

<div class="summaries-graph-box">
     <div class="summaries-graph">
          <div [style.height.px]="getSummaryHeight(summary.Plan)" 
               class="summary-graph-column summary-plan summary-odds">
                  <span class="summary-value">123</span>
          </div>                 
      </div>
</div>

还有你在 .ts 上的功能：

getTheRightHeight();

应该返回一个数值，例如：40。（不是40px，只是40）

--更新
如果您仍想访问变量或 css，您可以这样做：

@ViewChild("myDiv") myDiv: ElementRef;

然后您可以通过this.myDiv.nativeElement 访问 div 属性并访问变量
(<HTMLDivElement>this.myDiv.nativeElement).style.setProperty('--YouCSSVariable', YourNewValue)
的样式属性，就像在 Javascript 中一样