css - 如何在 Angular 2 的 css/style 标签中使用组件变量？

Question

如何在 Angular 2 的样式 TAG 中使用组件变量？

我的页眉确实有一个 Angular 2 组件，我喜欢根据用户设置对其进行着色。因此我想指定背景和字体颜色。虽然我知道如何使用绑定(bind)到元素的属性来实现这一点，但我不知道如何在样式标签中使用。

对样式使用属性绑定(bind)效果很好，但是这对几个子元素来说非常烦人，尤其是当它们嵌套在其他子组件中时。 [ngStyle]= 属性也仅适用于单个元素。

<header id="header" [style.background-color]="changeBackground()">
  <div>
    Some Text
    <a href="asdf">Some Link</a>
    <subcomponent></subcomponent>
  </div>
  <div> ... a lot mor stuff </div>
</header>

因此我想添加一些东西

<style>
#header, #header a {
  color: {{mycolor}};
}
</style>

到 html 模板。然而这是行不通的

类似的问题还没有回答这个问题，只显示属性绑定(bind)作为解决方案:

• Angular2 dynamic change CSS property
• Dynamically updating css in Angular 2
• https://scotch.io/tutorials/all-the-ways-to-add-css-to-angular-2-components
• https://coryrylan.com/blog/introduction-to-angular-2-ngclass-and-ngstyle

Answer 1

在我看来，您只是在创建一个名为“子组件”的新组件，为什么不这样做呢？

子组件.ts:

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

@Component({
  selector: 'subcomponent',
  templateUrl: './subcomponent.html',
})
export class SubComponent {
  mycolor = 'blue';
}

子组件.html:

<style>
#header, #header a {
  color: {{mycolor}};
}
</style>