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>

Answer 1

Угловая санация 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;
    }
  }
}

Живая демо

Вы можете найти эту статью интересной. В нем подробно рассматриваются темы угловых компонентов с переменными CSS.

Answer 2

Для тех, кто использует последние версии Angular. Вы можете реализовать это любым из следующих способов:

Используйте визуализаторsetPropertyвместоsetStyle

Пример №1: установка 1 переменной CSS

      this.renderer.setProperty(
  // it can be this.elementRef.nativeElement 
  // or this.document.documentElement or any similar
  <ELEMENT>, 

  // we will set the "style" property of the element
  'style',   

  // the CSS variable you want to declare
  // be sure to encapsulate it in a back tick (`)
  `--height: ${this.height}px`     
);

Пример № 2: установка сразу нескольких переменных CSS

ПРИМЕЧАНИЕ. Если вы имеете дело с несколькими переменными CSS, избегайте их реализации по отдельности, как это было сделано в примере № 1 выше, так как это заменит первоначально объявленные переменные CSS и завершится только регистрацией последнего кода setProperty.

      this.renderer.setProperty(
  // it can be this.elementRef.nativeElement 
  // or this.document.documentElement or any similar
  <ELEMENT>, 

  // we will set the "style" property of the element
  'style',

  // the CSS variables you want to declare 
  // be sure to encapsulate all of them in a back tick (`)
  `
      --height: ${this.height}px;
      --width: ${this.width}px;
  `
);