ng-Bootstrap Modal öffnet Komponente, aber Orte html-Selektor

Question

Ich verwende ng-bootstrap innerhalb meiner eckigen 4-Anwendung. Mit ngbModal öffne ich ein Modal. Der modale Inhalt wird in einer separaten Komponente platziert: selector: 'my-modal-component'.

Komponente ein (klicken modal in den component.ts zu öffnen):

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

Komponente zwei (der Inhalt des modal):

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

So weit so gut . Die Klasse .modal-content erhält die Koordinaten d-flex und flex-column, um sicherzustellen, dass die .modal-header, - body und - footer wissen, was zu tun ist (teilen Sie die Höhe vertikal).

Aber: weil ich ngbModal eine Komponente als Inhalt des modalen gebe es einen Selektor-Tag im HTML platziert:

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

Aufgrund dieser HTML-Selektor ist mein Flexbox Styling nicht funktioniert nicht mehr, da die .modal-header, - body und -footer nicht mehr direkte Kinder der .modal-content Klasse sind.

Weiß jemand, ob der Selektor ignoriert werden kann?

EDIT: Das ist mein gewünschtes Ergebnis:

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

Ich habe googeln und wie verrückt zu lesen, aber nicht jemand mit dem gleichen Problem und Frage gefunden.

Answer 1

versuchen, Ihre scss-Seiten in dirent Weg wie: importieren 'style-loader!./Your-scss-file-name.scss';