ng-bootstrap 模态打开组件，但放置 html-selector

Question

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

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

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

组件二（模态框的内容）：

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

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

Answer 1

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