具有不同CSS {Angler2}的组件实例

时间:2016-11-01 13:52:16

标签: html css angular angular2-template

我有一个带有组件的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会变得混乱,我觉得无论如何都不应该使用@Input。

是否有正确/更好的方法可以做到这一点,或者最佳实践要求我预期会有太多的组件并坚持使用3个独立的组件?

由于

1 个答案:

答案 0 :(得分:0)

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

这是我的榜样:

组件:

@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;

尽管您可以使用ngClassstyle属性执行类似操作。