角/ ngbmodal：backgroundClass不起作用

Question

我正在尝试使用 backdropClass 将ngbmodal对话框的背景色更改为蓝色。它不起作用，为什么？

我的代码是：

*组件调用：

let options: NgbModalOptions = {
        size: 'sm',
        backdrop:'static',
        backdropClass: "light-blue-backdrop"
      };

      var res = this.modalService.open(content, options);

* html组件：​​

<ng-template #content let-modal>
<div class="modal-header">
    <h4 class="modal-title">Modal title</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body">
    <p>One fine body&hellip;</p>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-light" (click)="modal.close('Close click')">Close</button>
</div>
</ng-template>

* CSS类：

.dark-modal .modal-content {
    background-color: red;
    color: white;
  }

.dark-modal .close {
    color: white;
}

.light-blue-backdrop {
    background-color: blue !important;
}

您看到的图像以黑色而不是蓝色显示背景：

Answer 1

只需添加一个具有背景定义的全局样式（样式文件夹）。 ng-bootstrap modals的背景被注入到body标签中。

不要更改应用的ViewEncapsulation，尤其是对于应用组件...这会给您带来很多问题。

Answer 2

您需要使用ViewEncapsulation.None（*）

在您的组件中

import { Component,ViewEncapsulation  } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  encapsulation: ViewEncapsulation.None, //<--this line
  ...
})

请参见stackblitz

（*），请谨慎使用ViewEncapsulation。请不要将组件中的所有.css都传播到所有应用程序，因此，如果在.css中包含某些类似内容

h1{color:red}

您在应用程序中所有的h1变为红色。为了避免这种情况，您可以将所有组件都包含在一个类的div中，并像.ps这样写

.mycomponent.h1{color:red}