当我们点击弹出模态角度 5 时，如何获得来自 ng-bootstrap 的类模态背景？

Question

实际上，我在 angular 5 中使用 ng-bootstrap 进行模态。实际上我想在现有类“模态背景”中添加一些 css，当单击弹出模态服务以从 ng-bootstrap 库打开时，它会出现，但什么时候不喜欢document.getElementsByClassName('modal-backdrop')[0]; 由于异步调用而未定义。 我想当我调用 open 方法时首先调用 const head = document.getElementsByClassName('modal-backdrop')[0]; 那么 this.modalService.open() 服务，我该怎么办请帮我解决这个问题？

open() {
    this.modalRef = this.modalService.open(this.modal, {
    windowClass: 'confirmation_popup',
    centered: true
});
const head = document.getElementsByClassName('modal-backdrop')[0];
} 

Answer 1

您可以添加选项windowClass和backgroundClass ，例如

this.modalService.open(content, 
     { windowClass: 'dark-modal',
       backdropClass: 'light-blue-backdrop' }
);

啊！，别忘了在你的组件中添加 ViewEncapsulation.None(*)

@Component({
  selector: 'ngbd-modal-options',
  templateUrl: './modal-options.html',
  encapsulation: ViewEncapsulation.None //<--this line
})

或者在你的文件style.css 中包含 .css

(*) 这使得您组件中的所有 .css 都被翻译成您的所有应用程序。