次のようにテンプレートを使用して、私は単純なコンポーネントを持って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）を変更したり、表示を変更しない限り、あなたは、それに幅を追加することはできませんを意味し、ブラウザ、（block/inline-block/flex/inline-flexでinlineとしてレンダリングされます）。

ので（ひんしゅくを買う）スタイルをインラインで変更したり、あなたのコンポーネントにCSSルールを追加し、次のいずれか

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