У меня есть приложение 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>
The other two components have the same structure/functionality only with the CSS being different. Each component also has it's own CSS file.
Компоненты будут использоваться следующим образом:
<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 отдельных?
Спасибо