在Angular 2中，是否可以为同一组件应用不同的样式？

Question

我有一个通用组件，我想在整个应用程序中重复使用它。问题是，我希望为网站的各个部分以不同的样式进行设置。这种情况是否可行？

我猜测可以通过传递styleUrl的路径来实现，但这似乎非常混乱，我希望有更好的选择。

我也尝试了以下方法，但没有成功：在指定组件时，添加类，类似于以下内容。

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

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

- user3715648

---

您可以在组件上添加 customClass 属性，并在每个实例中指定所需内容。 - Adrian Fâciu

更新了原帖。这是你想要的吗？我尝试过了，但没有成功。 - user3715648

由于视图封装，您可能会遇到问题。要么在组件上将其指定为“无”，要么将自定义类添加到未绑定到特定组件的main.css文件中。 - Adrian Fâciu

我的解决方案不是使用相同的组件，而是避免为每个组件重复编写代码。我会创建一个HTML文件和一个ts文件，然后每个外观不同的组件都引用相同的HTML和TS文件，但使用不同的CSS文件。 - titusfx

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链接，希望对你有所帮助！

- Madhu Ranjan

Answer 2

您可以使用:host(...)选择器与@HostBinding()组合，如下所示：

@Component({
  selector: 'my-comp',
  styles: `
  :host([type-default]) {
    background-color: red;
  }

  :host([type-header]) {
    background-color: blue;
  }

  :host([type-main]) {
    background-color: green;
  }
`
})
export class MyComponent {
  @Input()
  @HostBinding('component-type')
  componentType:String="type-default"
}

然后切换样式，如下：

<header>
  <my-comp componentType="type-header"></my-comp>
</header>

<main>
  <my-comp componentType="type-main"></my-comp>
</main>

<my-comp></my-comp>

您也可以像在您的问题中那样从外部应用一个类，然后使用：host(...)选择器，例如

:host(.customStyle1) {

抱歉，我不太明白您的要求。您能否提供更具体的信息和需要翻译的文本？

  @Input()
  @HostBinding('component-type')
  componentType:String="type-default"

但是如果你想将样式与组件的其他配置设置结合起来，这种方式可能会很有益。

- Günter Zöchbauer

---

这很有趣，但是你必须在my-comp组件内定义所有可能的样式。是否有一种动态的方式？比如说，我想在某个地方使用my-comp，那么我可以创建一个包装组件，在其中定义我想要的样式，然后使用template: `<my-comp></my-comp>。 - David

你可以使用 ::ng-deep（之前是 /deep/）从外部样式化组件。 - Günter Zöchbauer

看起来不错，但文档中说这将在未来被弃用。我认为这对于使用类似组件的不同产品的公司来说是一个非常普遍的问题。难道没有一种“最佳”方法来解决这个问题吗？ - David

我知道，这个注释相当令人困惑。在没有适当的替代方案之前，它不会被弃用。我的猜测是，当所有浏览器都原生支持影子 DOM 的主题时，他们将废除整个 ViewEncapsulation.Emulated（目前默认）而采用 Native。 - Günter Zöchbauer