Bootstrap-Stil funktioniert nicht gegen Angular2-Komponenten

Question

Bootstrap-Stil funktioniert nicht gegen Angular2-Komponenten.

in der folgenden angular2 Komponente nicht als bootstrap Flüssigkeit Container in ui arbeiten. in Arbeit wird, wenn ich 'container-fluid' innerhalb der Komponente mit div-Element verwenden.

Ex: (Arbeiten nicht)

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

Arbeits-Code

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

Answer 1

Das ist, weil Browser, nicht diese Komponenten als HTML-Elemente erkennen, so dass sie nicht gelten die Standardstile auf sie . Sie müssen display:block zu der Komponente hinzufügen, und es wird korrekt gerendert.

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

Das wird funktionieren. Sie können diese issue lesen, wo gerade diskutiert wird, display:block standardmäßig hinzuzufügen.

Siehe dieses plnkr mit einem Beispiel funktioniert. Um den Unterschied zu sehen, entfernen Sie die Eigenschaft styles aus der Komponente.