我在我的角度4应用程序中使用ng-bootstrap . 使用ngbModal我打开一个模态 . 模态内容放在一个单独的组件中： selector: 'my-modal-component' .
Component one (click to open modal in the component.ts):
this.spModalService.open(MyModalComponent, 'sm');
Component two (the content of the modal):
<div class="modal-header"> (..) </div>
<div class="modal-body"> (..) </div>
<div class="modal-footer"> (..) </div>
到现在为止还挺好 . 类 .modal-content 获取calsses d-flex 和 flex-column 以确保 .modal-header ， - body 和 footer 知道该怎么做（垂直划分高度） .
但是：因为我给ngbModal一个组件作为模态的内容，所以它在HTML中放置一个selector-tag：
<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 类的直接子项 .
有谁知道选择器是否可以被忽略？
EDIT: This is my desired result:
<div class="modal-content">
<div class="modal-header"> (...) </div>
<div class="modal-body"> (...) </div>
<div class="modal-footer"> (...) </div>
</div>
我一直在谷歌搜索和疯狂阅读，但没有发现任何人有同样的问题和疑问 .
1 回答
尝试以如下方式加载scss页面：import'style-loader！./ your-scss-file-name.scss';