html - 在 Angular 5 中的 <style> 标签之间绑定(bind) css

Question

我开始使用 angular 5，但在 component.ts 中的变量的标签样式之间绑定(bind) css 时遇到问题。

所以这是我在 component.ts 中的代码:

export class AppComponent {
  style = '.p-color{color: red;}';
}

这是我的 html 代码:

<style>{{style}}</style>

有人知道如何解决吗？

Answer 1

提前问一个问题:你为什么要这么做？我认为这不是实现目标的最佳方法。

Angular 4 中还有其他几种应用样式的方法:

类选择器

<p [class.color-red]="your-expression">Your text</p>

主机绑定(bind)

export class SongTrack {   
  //<host class="selected"></host>   
  @HostBinding('class.selected') selected = true;
  //<host style="color: red;"></host>     
  @HostBinding('style.color') color = 'red';
}

来源:https://medium.com/google-developer-experts/angular-advanced-styling-guide-v4-f0765616e635

直接设置样式

<h1 [style.color]="titleStyle ? 'green' : 'pink'">
  {{title}}
</h1>

希望对您有所帮助:)