Question

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

这似乎没有用，我需要我的样式是动态的，并且在某些特定的CSS类中。还有其他方法可以做到这一点吗？

Answer 1

呈现组件时，样式标签将移动到页面的head元素，并且该元素内的所有角度语法都将被忽略。

我发现的唯一方法是动态创建样式元素并提供所需样式。

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>

stackblitz demo

Answer 2

您可以像这样使用ngStyle指令;

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

Answer 3

我遇到了同样的问题。以我为例，他使用了had和xml来更改颜色，并在应用程序加载时调用了api和api以读取xml并获取JSON对象。我已经对所有元素的颜色进行了分类，例如PrimaryForeground，PrimaryBackground，PrimaryHover等。一旦获得json对象，我就会更新此变量的值。

Answer 4

尝试使用$ {}

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

`

Answer 5

您可以按[style.color]访问颜色样式，或在样式表[class]中指定已定义的类：

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

Here is a running example.

Answer 6

如果你想动态加载一个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) {}
}

如何在Angular组件的样式标签中使用字符串插值？

6 个答案: