具有不同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屬性執行類似的操作。