Nehmen Komponente Vorlage in Angular2

Question

Ich habe eine einfache Komponente, eine Vorlage wie folgt aus:

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

Dann in Aufrufort ich Geige mit dem Styling:

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

... was absolut nichts bewirkt. Zur Laufzeit bedeutet das obige:

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

Fabulous. Auf <my-comp> wird die Breite ignoriert, und auf der <span>, wo ich es will, wird es nicht angewendet.

Ich weiß, ich kann die Breite eine Eigenschaft meiner Komponente machen und dann in der Vorlage anwenden, aber meine Frage ist breiter als das: Was, wenn ich nicht über das angewandte Styling schreiben will? Gibt es eine Möglichkeit, Attribute von der Aufrufsite automatisch auf das äußere Element der Vorlage anzuwenden?

Answer 1

ist eine individuelle Komponente als inline im Browser gerendert, was bedeutet, dass Sie nicht eine Breite ihm hinzufügen, wenn Sie ihre Positionierung ändern (absolute/fixed) oder die Anzeige ändern (block/inline-block/flex/inline-flex).

Also entweder den Stil Inline ändern (verpönt) oder eine CSS-Regel zu Ihrer Komponente hinzufügen:

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