Angular2組件實例與不同的CSS

我有一個Angular2應用程序與組件，其中一些我想在同一頁面上使用多次。我原本有三個組件，但本着重構的精神，我想將一些功能合併爲一個。Angular2組件實例與不同的CSS

組件的基本的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個獨立的組件？

感謝

來源

2016-11-01 user281921

我不知道你在這裏想達到什麼目的。默認情況下，所有組件都可以使用'styleUrls'或'style'選擇器自己的CSS。你能否進一步解釋以便我理解並提供答案？ –

我已經添加了一個用例。我希望組件的所有實例（組件A，B，C）使用不同的CSS。然而，我想重新使用組件本身。 – user281921

我不知道，使用方法的，但仍然是HRE根據您的要求我的建議。即使用'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。
我-component_A.component.css

:host 
    #component_A 
     background: red;

我-component_B.component.css

:host 
    #component_B 
     background: green;

不過，雖然你可以做類似的事情與ngClass和style屬性。

來源

2016-11-01 14:31:06

這有效，並使我走上正軌。 – user281921

完美！樂意效勞。 –

Angular2組件實例與不同的CSS

回答

相關問題