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';
    }