이 같은 템플릿을 사용하여, 나는 간단한 구성 요소가 Angular2

Question

에서 템플릿에 구성 요소를 적용 :

<span style="display:inline-block;" #control>Content here</span> 

그런 다음, 호출 사이트에서 나는 스타일로 바이올린 :

<my-comp style="width:300px;"></my-comp> 

... 그것은 절대적으로 아무것도 수행하지 않습니다. 런타임에 위의 내용은 다음과 같이 변환됩니다.

<my-comp style="width:300px;" class="ng-untouched ng-pristine ng-valid"> 
    <span style="display:inline-block;" #control>Content here</span> 
</my-comp> 

엄청납니다. <my-comp>에 너비가 무시되고 내가 원하는 곳의 <span>에 적용되지 않습니다.

폭을 내 구성 요소의 속성으로 만든 다음 템플릿에 적용 할 수 있다는 것을 알고 있지만 제 질문은 그보다 더 넓습니다. 적용되는 스타일에 대해 규정하고 싶지 않으면 어떻게합니까? 호출 사이트의 속성을 템플릿의 외부 요소에 자동으로 적용 할 수있는 방법이 있습니까?

Answer 1

맞춤 구성 요소는 그 위치 (absolute/fixed)를 변경하지 않는 한, 그것의 폭을 추가 할 수 있다는 것을 의미 브라우저에 inline 인 것으로 렌더링 또는 표시를 변경한다 (block/inline-block/flex/inline-flex).

그래서 하나 (눈살을 찌푸리게) 스타일 인라인을 변경하거나 구성 요소에 CSS 규칙을 추가

@Component({ 
    selector : 'my-comp', 
    template : `...`, 
    styles : [`:host{display: inline-block}`] 
}) 
export class MyCompComponent {}