0

我在我的 Angular 4 应用程序中使用ng-bootstrap 。使用 ngbModal 我打开一个模态。模态内容被放置在一个单独的组件中：selector: 'my-modal-component'.

组件一（在component.ts中点击打开modal）：

this.spModalService.open(MyModalComponent, 'sm');

组件二（modal的内容）：

<div class="modal-header"> (..) </div>
<div class="modal-body"> (..) </div>
<div class="modal-footer"> (..) </div>

到目前为止，一切都很好。班级.modal-content获得课程d-flex并flex-column确保.modal-header, -body和 -footer知道该做什么（垂直划分高度）。

但是：因为我给 ngbModal 一个组件作为模态的内容，所以它在 HTML 中放置了一个选择器标签：

<div class="modal-content">
    <my-modal-component>
        <div class="modal-header"> (..) </div>
        <div class="modal-body"> (..) </div>
        <div class="modal-footer"> (..) </div>
    </my-modal-component>
</div>

由于这个 HTML 选择器，我的 flexbox 样式不再起作用，因为.modal-header, -body和 -footer不再是该类的直接子.modal-content级。

有谁知道选择器是否可以忽略？

编辑：这是我想要的结果：

<div class="modal-content">
    <div class="modal-header"> (...) </div>
    <div class="modal-body"> (...) </div>
    <div class="modal-footer"> (...) </div>
</div>

我一直在疯狂地搜索和阅读，但没有发现任何人有同样的问题和疑问。

4

1 回答 1

0

尝试以不同的方式加载您的 scss 页面，例如： import 'style-loader!./your-scss-file-name.scss';

于 2017-11-20T15:28:25.363 回答