angular - Angular: Renderer 2 を使用して CSS 変数を追加する

Question

を使用してインライン スタイルの css 変数を追加することは可能Renderer2ですか?

以下を試しましたが、うまくいきません。

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>