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？

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属性，并像在Javascript中一样访问变量
(<HTMLDivElement>this.myDiv.nativeElement).style.setProperty('--YouCSSVariable', YourNewValue)
的style属性

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

1 个答案: