Bootstrap样式不适用于Angular2组件

Question

Bootstrap样式不适用于Angular2组件。

在下面的angular2组件中，不能用作ui中的bootstrap流体容器。如果我使用＆＃39; container-fluid＆＃39;在具有div元素的组件内部。

Ex :(不工作）

@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

这是因为浏览器不会将这些组件识别为HTML元素，因此他们不会在其上应用默认样式。您必须将display:block添加到组件中，它才能正确呈现。

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

那会有效。您可以阅读正在讨论的issue，默认情况下添加display:block。

请参阅此plnkr并举例说明。要查看差异，请从组件中删除styles属性。