Применить компонент к шаблону в 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> 

Fabulous. В поле <my-comp> ширина игнорируется, а на <span>, где я хочу, она не применяется.

Я знаю, что могу сделать ширину свойством моего компонента, а затем применить его в шаблоне, но мой вопрос шире: Что делать, если я не хочу быть директивным в отношении применяемого стиля? Есть ли способ, чтобы атрибуты с сайта вызова автоматически применялись к внешнему элементу шаблона?

Answer 1

пользовательский компонент визуализируется как inline в браузере, который означает, что вы не можете добавить ширину к нему, если не изменить позиционирование (absolute/fixed) или изменить отображение (block/inline-block/flex/inline-flex).

Так что либо изменить встроенный стиль (одобряется), или добавить правило CSS для компонента:

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