Angular 8 ng-bootstrap modal 不加载 CSS 类答案

【问题标题】：Angular 8 ng-bootstrap modal not loading CSS classesAngular 8 ng-bootstrap modal 不加载 CSS 类
【发布时间】：2021-08-25 07:58:15
【问题描述】：

我在 Angular 8 项目中 npm install @ng-bootstrap/ng-bootstrap@5.3.1，当我使用模态服务打开模态时，第一次尝试打开模态需要时间。第二次模态不打开。查看开发工具，模式是打开的，只是没有设置 CSS 类。我确实将 bootstrap 导入到 styles.scss 文件 @import "~bootstrap/scss/bootstrap.scss"; 我尝试在打开模型后使用 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应该如下：

【问题讨论】：

您是否在angular.json 中导入引导脚本？
是的，我确实导入了脚本
如果文件已加载，您能否在 F12 中看到
为什么还要使用return？也许试试.show
我正在使用版本 5 的 ng-bootstrap（角度 8）没有 .show。我使用 return 是因为我正在调用该函数来打开模型，而不是每次都调用 this.modalService.open

标签： javascript css angular ng-bootstrap

【解决方案1】：

尝试在没有任何选项的情况下调用 modalService.open()，看看是否有什么不同。

this.modalService.open(this.modalContent)

【讨论】：

应该是评论
不幸的是，我的声誉没有那么高，无法直接对发布的问题发表评论。

【解决方案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';
    }

【讨论】：