Как использовать строковую интерполяцию в теге стиля в угловом компоненте?

Question

@Component({
  selector: 'app-style',
  template: `
    <style>
      .test {
        color: {{ textColor }}
      }
    </style>
  `
})
export class StyleComponent {
  textColor = "red";
}

Кажется, это не работает, и мне нужно, чтобы мои стили были динамическими и в каком-то определенном классе CSS. Есть ли другой способ, которым я мог бы сделать это?

Answer 1

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

единственный способ, который я нашел, - это создать динамический элемент стиля и предоставить стиль желаний.

app.component.ts

  textColor = 'red';
  constructor(private el: ElementRef) {

  }

  ngOnInit() {

    let style: string = `
     .test {color :${this.textColor}; }
    `;

    this.createStyle(style);

  }

  createStyle(style: string): void {
    const styleElement = document.createElement('style');
    styleElement.appendChild(document.createTextNode(style));
    this.el.nativeElement.appendChild(styleElement);
  }

app.template.html

<span class="test">test</span>

демонстрация стекаблиц

Answer 2

Вы можете использовать директиву ngStyle, как это возможно;

@Component({
  selector: 'app-style',
  template: `
   <ul>
      <li [ngStyle]="{color: textColor}">List Item</li>
   </ul>
  `
})
export class StyleComponent {
  textColor = "red";
}

Answer 3

Я столкнулся с той же проблемой. В моем случае использовались и XML, где он менял цвет, и при загрузке приложения, которое я вызывал, и API для чтения XML и получения объекта JSON. Я классифицировал все цвета элементов, как PrimaryForeground, PrimaryBackground, PrimaryHover и т. Д. Как только я получил объект json, я обновлял значения этих переменных.

Answer 4

Если вы хотите динамически загрузить CSS, вы можете сделать «легкий» С первой попытки (у вас в папке ресурсов «style1.css» и «style2.css») пишется только в вашем app.component.html

<link rel="stylesheet" [href]='myStyle'>
...rest of tags...

//In your app.component.ts
myStyle="assets/style1.css"

Но проблема в том, что вы получаете ошибку «небезопасное значение, используемое в контексте URL ресурса», поэтому вы должны использовать Domsatinizer. Так

Ваш app.component, как

<link rel="stylesheet" [href]='sanitizer.bypassSecurityTrustResourceUrl(myStyle)'>
..rest of your div..

В вашем app.component.ts

import { DomSanitizer } from '@angular/platform-browser';

@Component({...})
export class appComponent{
   myStyle="assets/style1.css"
   constructor(public sanitizer: DomSanitizer) {}
}

Answer 5

Вы можете получить доступ к цветовому стилю с помощью [style.color] или указать определенный класс в таблице стилей [class]:

<div [style.color]="color">Style Test</div>
<div [class]="className">Class Test</div>

Вот пример работы.

Answer 6

попробуйте с $ {}

template: `
<style>
  .test {
    color: ${textColor}
  }
</style>

`