具有不同CSS的Angular2组件实例

Question

我有一个带有组件的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个单独的组件？

谢谢

Answer 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属性执行类似的操作。