Bootstrap样式不适用于Angular2组件 [英] Bootstrap style not working against Angular2 components

问题描述

Bootstrap样式不适用于Angular2组件.

以下angular2组件中的

在ui中无法作为自举流体容器工作.在工作中，如果我在带有div元素的组件内使用容器流体".

例如:(不起作用)

@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>

解决方案

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

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

那行得通.您可以阅读此问题，此处将讨论在默认情况下添加display:block.

请参见此 plnkr ，并提供示例示例.若要查看区别，请从组件中删除styles属性.

Bootstrap style not working against Angular2 components.

in the following angular2 component not working as bootstrap fluid container in ui. in works will if I use 'container-fluid' inside the component with div element.

Ex: (Not working)

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

Working Code

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

解决方案

That's because browsers don't recognize those components as HTML elements, so they don't apply the default styles on them. You have to add display:block to the component and it will render correctly.

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

That will work. You can read this issue where is being discussed to add display:block by default.

See this plnkr with an example working. To see the difference, remove the styles property from the component.

这篇关于Bootstrap样式不适用于Angular2组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！