javascript - 是否可以在 Angular 2 中为相同的组件设置不同的样式？

Question

我有一个通用组件，我想在整个应用程序中重复使用。问题是我想为网站的各个部分设置不同的样式。这可能吗？

我猜想有一种方法可以为 styleUrl 传递路径，但这看起来真的很困惑，我希望有更好的选择。

我也试过这个但是没有用:指定组件时，在类中添加，像这样

<generic-component class="customStyle1"></generic-component>

然后将基于 customStyle1 的样式添加到通用组件的样式表中，但它似乎没有采用该样式。

Answer 1

您可以在样式中使用 :host-context 来根据在使用它的地方应用的某个类来为您的 组件 设置主题。

阅读更多相关信息 here!!

test.css

:host-context(.theme-green) h3 {
   background-color: green;
}

:host-context(.theme-red) h3 {
   background-color: red;
}

app.component

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

@Component({
  selector: 'my-app',
  template: `
    <h3 class="title">Basic Angular 2</h3>
    <my-test class="theme-green" ></my-test>
    <my-test class='theme-red' ></my-test>
   `
})
export class AppComponent {
  constructor(){}
}

test.component

@Component({
  selector: 'my-test',
  template: `<h3>Test Component</h3>
  `,
 styleUrls : ['./app/test.css']
})
export class TestComponent {
 constructor(){}
}

这是 Plunker!!

希望这对您有所帮助!