ng-bootstrap Modal将附加类传递给.modal-dialog

问题描述

我目前在有角度的应用程序中使用自定义主题，我需要在 ngb-modal内的“ .modal-dialog ”容器中附加一个额外的CSS类。 -窗口。

根据文档（https://ng-bootstrap.github.io/#/components/modal/api），只有通过以下方式传递 ngb-modal-window 本身的类的可能性：

this.modalService.open(MyModalComponent,{ windowClass: 'my-own-styles' })

是否有一种无需使用jQuery即可将类传递给“ .modal-dialog ”容器的方法？

解决方法

我已经遍历了Modal库中ng-bootstrap组件中的代码，但找不到解决方案。无论如何，如果您只想使用此类来对该组件的某些部分进行样式设置，则可以将其用于模态窗口并选择某些作为窗口子级的类，即：

TS：

{ windowClass: 'window-class' }

SCSS：

.window-class {
    .modal-dialog {
        // some styles you want to apply
    }
}

此外，我认为在Angular应用程序中使用jQuery不是一个好主意。

,

查看该文档的 'examples' section。秘密在于组件定义的顶部：

要允许样式传递到组件，您需要设置 encapsulation: ViewEncapsulation.None。

在组件定义中执行此操作后，您的 CSS 类将被选取。例如：this.modalService.open(MyModalComponent,{ windowClass: 'my-own-styles' }).