Angular2 구성 요소 다른 CSS가있는 인스턴스

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를 사용하는 방법을 잘 모르겠습니다. 이것은 그러나 어쨌든 스타일링에 사용한다고 생각하지 않습니다 @Input를 사용하여 엉망이 될 것

<component id="ComponentA" [css-main]='???' [css-result]='???'></component> 

: 내가 생각 된 유일한의 라인을 따라 뭔가이었다.

이 작업을 수행하는 올바른 방법이나 더 좋은 방법이 있습니까? 너무 많은 구성 요소를 기대하고 있으며 3 가지 별도의 것을 사용하도록 권장하는 것이 가장 좋습니다.

감사합니다.

Answer 1

아직 사용법은 확실하지 않지만 hre는 귀하의 요청에 따라 제안 된 것입니다. 그것은 'styleUrls'매개 변수를 사용하고 해당 스타일 파일에서 스타일을 분할하는 것입니다.

여기 내 예제 :

구성 요소 :

@Component({ 
    selector: 'my-component', 
    templateUrl: 'my-component.component.html', 
    styleUrls: ['my-component_A.component.css','my-component_B.component.css'] 
}) 
... 

당신의 HTML : 당신은 CSS

<my-component id="component_A"></my-component> 
<my-component id="component_B"></my-component> 

.

:host 
    #component_B 
     background: green; 

여전히 당신이 ngClass 및 style 속성과 비슷한 일을 할 수 있지만 내-component_A.component.css

:host 
    #component_A 
     background: red; 

내-component_B.component.css.