Angular：使用渲染器 2 添加 CSS 变量

Question

是否可以使用 Renderer2 添加内联样式 css 变量？

我尝试了以下但它不起作用。

import { Component, OnChanges, Output, ViewChild, Renderer2, ElementRef, ViewEncapsulation } from '@angular/core';

@Component({
})
export class CollapsibleComponent implements OnChanges {

  @ViewChild('collapsibleContent') collapsibleContent: ElementRef;

  constructor(
    private renderer: Renderer2
  ) { }

  ngOnChanges() {
    this.measureCollapsibleContents()
  }

  measureCollapsibleContents() {
    this.renderer.setStyle(this.collapsibleContent.nativeElement, '--expanded', this.collapsibleContent.nativeElement.firstElementChild.offsetHeight + 'px' )
  }

}

'--expanded' 不是正确的 css 属性所以 angular 不会为我的 div.

添加任何样式

如果我确实添加了正确的 css 属性，它将像下面的代码一样工作。

this.renderer.setStyle(this.collapsibleContent.nativeElement, 'top', this.collapsibleContent.nativeElement.firstElementChild.offsetHeight + 'px' )

我的 div 的输出将是

<div style="top: 160px">...</div>

我想实现如下目标

<div style="--expanded: 160px">...</div>

我也试过 [ngStyle] 但除了 style 属性外，它也没有呈现任何值。

[ngStyle]="{'--expanded': expandedHeight }"

输出到

<div style>...</div>

Answer 1

Angular 清理 CSS 在属性绑定中设置的变量。您可以使用 DomSanitizer 绕过此行为。

@Component({
  selector: 'my-app',
  template: `
    <button (click)="dec()">-</button>
    <button (click)="inc()">+</button>

    <div [style]="style"> My height is set by CSS Variable </div>
  `,
  styles: [`
    div {
      height: var(--height);
    }
    `
  ]
})
export class AppComponent {
  height = 50;

  get style() {
    return this.sanitizer.bypassSecurityTrustStyle(`--height: ${this.height}px`);
  }

  constructor(private sanitizer: DomSanitizer) { }

  inc() {
    this.height += 10;
  }


  dec() {
    this.height -= 10;
    if (this.height <= 0) {
      this.height = 0;
    }
  }
}

Live demo

您可能会发现这 article 很有趣。它详细介绍了使用 CSS 变量对 Angular 组件进行主题化。

Angular：使用渲染器 2 添加 CSS 变量

Angular: Use Renderer 2 to Add CSS Variable

css-variables

angular

angular-renderer