ブートストラップスタイルがAngular2コンポーネントに対して機能しない

Question

ブートストラップスタイルがAngular2コンポーネントに対して機能しません。

以下のangular2コンポーネントは、uiのブートストラップ流体容器として機能しません。 div要素を持つコンポーネントの内部で 'container-fluid'を使用すると動作します。

例：ブラウザがHTML要素として、これらのコンポーネントを認識しないので、彼らは彼らのデフォルトのスタイルを適用されないためです（動作しない）

@Component({ 
    selector: 'gn-app', 
    viewProviders: [], 
    moduleId: module.id, 
    template: 
     `<gn-layout class="container-fluid" 
     (window:resize)="gnOnResize($event)" 
     </gn-layout> 
    `, 
    directives: [ROUTER_DIRECTIVES, LayoutComponent] 
}) 

ワーキングコード

<gn-layout> 
    <div class="container-fluid"> 
     <div class"row"> 
      <gn-container></gn-container> 
     </div> 
    </div> 
</gn-layout> 

Answer 1

。コンポーネントにdisplay:blockを追加する必要があります。正しくレンダリングされます。

@Component({ 
    styles : [` 
     :host { 
      display: block; 
     } 
    `] 
}) 

これで動作します。このissueを読むことができます。デフォルトではdisplay:blockが追加されています。

例を参照してください。plnkrを参照してください。違いを確認するには、コンポーネントからstylesプロパティを削除します。