具有不同 CSS 的 Angular2 组件实例答案

【问题标题】：Angular2 Component Instances with different CSS具有不同 CSS 的 Angular2 组件实例
【发布时间】：2016-11-01 22:31:06
【问题描述】：

我有一个带有组件的 Angular2 应用程序，其中一些我想在同一页面上多次使用。我最初有三个组件，但本着重构的精神，我想将一些功能组合成一个。

组件的基本HTML如下：

<div class="component-class componentA-main" >
  <div class="result componentA">
    <div class="canvasContainer">
      ... common component functionality here ... 
      <canvas id="canvas_container"></canvas>
    </div>
  <div class="componentA-results">
    ... common component functionality here ... 
  </div>
</div>

其他两个组件具有相同的结构/功能，只是 CSS 不同。每个组件也有自己的 CSS 文件。

组件将按以下方式使用：

<div>
 <component id="ComponentA"></component>
 <component id="ComponentB"></component>
 <component id="ComponentC"></component>
</div>

现在我的想法是将任何特定于组件的 CSS 类重命名为通用名称，并拥有三个不同的组件 CSS 文件（componentA.css、componentB.css 等）

但我不确定如何让组件的每个实例都使用正确的 css。我唯一想到的就是：

 <component id="ComponentA" [css-main]='???' [css-result]='???'></component>

但是，使用 @Input 会变得一团糟，我觉得无论如何都不应该用于样式设置。

是否有正确/更好的方法来做到这一点，或者最佳实践会规定我对一个组件的期望过高并坚持使用 3 个单独的组件？

谢谢

【问题讨论】：

我不确定您想在这里实现什么。默认情况下，所有组件都可以使用styleUrls 或style 选择器拥有自己的css。您能否进一步解释一下，以便我理解并为您提供答案？
我添加了一个用例。我想让组件的所有实例（组件 A、B、C）使用不同的 CSS。但是，我想重用组件本身。

标签： html css angular angular2-template

【解决方案1】：

我仍然不确定使用情况，但这是我根据您的要求提出的建议。那就是使用'styleUrls'参数并在这些样式文件中拆分您的样式。

这是我的例子：

组件：

@Component({
  selector: 'my-component',
  templateUrl: 'my-component.component.html',
  styleUrls: ['my-component_A.component.css','my-component_B.component.css']
})
...

你的html：

<my-component id="component_A"></my-component>
<my-component id="component_B"></my-component>

你的 css。
my-component_A.component.css

:host
    #component_A
       background: red;

my-component_B.component.css

:host
    #component_B
       background: green;

尽管您可以使用 ngClass 和 style 属性做类似的事情。

【讨论】：

完美！很高兴为您提供帮助。