Использование переменной CSS в угловом шаблоне HTML? - PullRequest
Новая
       72

Использование переменной CSS в угловом шаблоне HTML?

1 голос
/ 06 октября 2019

У меня есть компонент, который устанавливает цвет фона div на основе значения, хранящегося в файле json, который я затем перебираю, чтобы показать несколько образцов цвета. 

   <div class="color-swatch-color"
        [style.background-color]="foo"></div>

Работает нормальнос шестнадцатеричным цветом в переменной: foo="#f00";

Но ни один цвет не показывает, что я использую переменную цвета: foo = 'var(--primary)';

Div показывает в HTML, ошибки не выдаются,но в div нет никакого цвета фона.

ОБНОВЛЕНИЕ

Я должен быть более ясным. У меня есть тема, которая использует такие переменные, как --primary, --secondary (например, Bootstrap). Я хочу показать образцы с этими цветами. Тем не менее, я использую переменные в своих классах CSS, чтобы я мог изменить их значение с помощью класса "theme" на теге body.

Поэтому я пытаюсь установить для своих образцов значениепеременные, чтобы при изменении пользователем класса в теге body образец автоматически менял цвет, как и все остальное в моем приложении.

Взгляните на этот стек * блиц . Если я назначу переменную напрямую, она назначит цвет фона. Через угловую переменную он не назначает никакого цвета.

Я делаю это таким образом, потому что если вы открываете инструменты разработчика, вы можете выбрать мою переменную brandcolor и изменить ее на лету;это похоже на переключение тем, где «brandcolor» может варьироваться в зависимости от темы

Ответы [ 3 ]

2 голосов
/ 06 октября 2019

Пример стека блика OP работает, кроме того, угловой компилятор считает var опасным.

Это можно обойти с помощью DomSanitizer 

public bg = this.sanitizer.bypassSecurityTrustStyle('var(--brandcolor)');
constructor(private sanitizer: DomSanitizer) {}

см. https://stackblitz.com/edit/angular-kerk9q?file=src/app/app.component.html

1 голос
/ 06 октября 2019

Вам понадобится встроенный CSS, чтобы использовать CSS-переменные и угловую интерполяцию, я думаю, что это сработает:

Вот пример динамического объявления встроенной переменной CSS с использованием угловой интерполяции 

<!--HTML-->
<html style="--color: {{myAngularVar}}"> <!-- declare a variable inline use Angular interpolation the value of myAngularVar is imply string/text the browser will parse as CSS code -->

И используя переменную, основанную на угловой / текстовой интерполяции, я использовал foo, так как это имя вашей угловой переменной в вашем вопросе 

<!--CSS-->
<style>
    div.color-swatch-color {  
        background-color: var({{foo}}) //another example
    }
</style>
0 голосов
/ 06 октября 2019

РЕДАКТИРОВАТЬ: Как насчет этого?

https://stackblitz.com/edit/angular-kfeihc

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  bg = 'var(--brandcolor)';

  setStyle() {
    return {
      'background-color': this.bg
    }
  }
}

<div class="swatch" [ngStyle]=setStyle()>{{bg}}</div>
...