Angular 8 ng-bootstrap 模式未加載 CSS 類

Question

我在 Angular 8 項目中安裝了 npm @ng-bootstrap/ng-bootstrap@5.3.1，當我使用模態服務打開模態時，第一次嘗試打開模態需要時間。 第二次模態不打開。 查看開發工具，模式是打開的，只是沒有設置 CSS 類。 我確實將引導程序導入到 styles.scss 文件@import "~bootstrap/scss/bootstrap.scss"; 打開 model 后，我嘗試使用 JavaScript 注入 CSS 類，但沒有任何區別。

   @ViewChild('modalContent', { static: false }) private modalContent: TemplateRef<any>;
   // .....some code here....

    public openNgbModal(): NgbModalRef {
      return this.modalService.open(this.modalContent, {
        size: 'lg',
        backdrop: 'static',
        keyboard: false,
        windowClass : 'modal-content'
      });
    }

見下文：

正確的 html 應該如下：

Answer 1

嘗試在沒有任何選項的情況下調用 modalService.open() 並查看它是否有任何區別。

this.modalService.open(this.modalContent)

Answer 2

我並不為答案感到自豪，但它確實完成了工作。 使用 javascript 添加類手冊。

   public openNgbModal(): NgbModalRef {
      return this.modalService.open(this.modalContent, {
        size: 'lg',
        backdrop: 'static',
        keyboard: false,
        windowClass : 'modal-content'
      });

      const modalBackdrop = document.getElementsByTagName('ngb-modal-backdrop');
      // check the class if exists
      modalBackdrop[0].className = 'modal-backdrop fade show';
      
      const modalWindow = document.getElementsByTagName('ngb-modal-window');
      // check the class if exists
      modalWindow[0].className = 'modal fade show d-block';
      modalWindow[0].setAttribute('aria-modal', 'true');
      modalWindow[0].children[0].className = 'modal-dialog modal-s';
    }