Angular：使用Renderer 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]，但除了样式属性外，它也没有呈现任何值。

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

输出到

<div style>...</div>

Answer 1

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

AppDomain

Live demo

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