为ngx-bootstrap模态添加或应用多个类的方法

问题描述

我想以大格式显示居中的ngx-bootstrap模态。

为此有两个类：modal-dialog-centered和modal-lg，但是我看不到同时应用这些类的任何方法。

在此处查看ngx-bootstrap source code时：modal-options.class.ts

有一个可选的class property，定义为class?: string;。但是它没有定义为我们可以应用的类的数组。

所以现在我可以使用以下方式显示模态居中位置：

this.bsModalRef = this.modalService.show(ConfirmationComponent,{class: 'modal-dialog-centered',initialState});

或大型模态但不居中：

this.bsModalRef = this.modalService.show(ModalConfirmationComponent,{class: 'modal-lg',initialState});

我试图将其添加到模式的开始模板中：

<div class="modal-dialog modal-lg">
  <div class="modal-content">
    <div class="modal-header">
    ...

但是也没有运气，班级modal-lg不想上班

任何人都有一个想法如何使它工作？

更新

此CSS看起来会产生一些结果，但表现不尽如人意：

::ng-deep .modal.show .modal-dialog {
  -webkit-transform: translate(50%,50%);
  transform: translate(0%,50%);
}

解决方法

@MikeOne提供的建议效果很好。

因此，添加以空格分隔的类将提供将多个类应用于模式的能力。

我们可以使用以下代码显示完全居中的模态：

this.bsModalRef = this.modalService.show(ModalConfirmationComponent,{class: 'modal-dialog-centered modal-lg',initialState});

到目前为止，我还没有看到官方文档中记录的位置。