使用ngx-bootstrap modalService时添加自定义类的方法

当寻找ngx引导程序 https://valor-software.com/ngx-bootstrap/#/ 源代码 https://github.com/valor-software/ngx-bootstrap here:

模态选项.class.ts https://github.com/valor-software/ngx-bootstrap/blob/development/src/modal/modal-options.class.ts

有一个可选的class property定义为class?: string;.

使用方法是什么？

是否可以添加自定义类，例如：

this.modalService.config.class = 'myClass';

在使用服务之前，例如：

this.modalRef = this.modalService.show(template, {
  animated: false
});

这样，我想我们可以将自定义 CSS 添加到显示的模式中

我尝试添加自定义类但没有成功。

该类属性不是数组，如果适用，是否意味着我们只能添加一个自定义类？

Demo:通过添加和覆盖modal类，模态未显示

https://stackblitz.com/edit/ngx-bootstrap-3auk5l?file=app%2Fapp.component.ts https://stackblitz.com/edit/ngx-bootstrap-3auk5l?file=app%2Fapp.component.ts

添加modal这种方式没有帮助：

this.modalRef = this.modalService.show(template, Object.assign({},
                this.config, { class: 'gray modal-lg modal' }));

https://stackblitz.com/edit/ngx-bootstrap-awmkrc?file=app%2Fapp.component.ts https://stackblitz.com/edit/ngx-bootstrap-awmkrc?file=app%2Fapp.component.ts

根据 ngx-bootstrap文档 https://valor-software.com/ngx-bootstrap/#/modals#service-options关于模态组件（参见成分选项卡），您可以添加一个class配置对象的成员。

重要的：由于在渲染的 HTML 中，modal 元素位于组件元素之外，因此应关闭该组件的 CSS 封装，或者应在另一个文件中指定该类的样式属性，以确保样式应用于模态元素。

下面的代码片段可以在这次堆栈闪电战 https://stackblitz.com/edit/ngx-bootstrap-mjcjnz.

import { Component, TemplateRef, ViewEncapsulation } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  modalRef: BsModalRef;
  config = {
    animated: true,
    keyboard: true,
    backdrop: true,
    ignoreBackdropClick: false,
    class: "my-modal"
  };

  constructor(private modalService: BsModalService) { }

  openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template, this.config);
  }
}

像这样的 CSS 文件：

.my-modal {
  border: solid 4px blue;
}

.my-modal .modal-header {
  background-color: lime;
}

.my-modal .modal-body {
  background-color: orange;
}

Update: This 其他堆栈闪电战 https://stackblitz.com/edit/ngx-bootstrap-3erfzm显示从外部文件导入 CSS 样式的示例styles.css，允许在组件中保留 CSS 封装。