ng-bootstrap 模态将附加类传递给 .modal-dialog答案

【问题标题】：ng-bootstrap Modal pass additional class to .modal-dialogng-bootstrap 模态将附加类传递给 .modal-dialog
【发布时间】：2021-05-15 02:49:07
【问题描述】：

我目前在 Angular 应用程序中使用自定义主题，我需要在 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”容器？

【问题讨论】：

ng bootstrap 有自己的 API，为什么您将其称为使用 jQuery。？顺便说一句，如果是出于 CSS 目的，您可以直接通过标签选择该元素，例如 [ngb-modal-window]
这与jQuery无关，我只是提到它没有得到使用jQuery设置类的建议。除此之外，我只想在特定容器上设置/附加一个类，而不必重写主题的现有样式。

【解决方案1】：

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

TS：

{ windowClass: 'window-class' }

SCSS：

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

另外，我认为将 jQuery 与 Angular 应用程序一起使用并不是一个好主意。

【讨论】：

【解决方案2】：

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

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

一旦您在组件定义中这样做，您的 CSS 类就会被拾取。例如：this.modalService.open(MyModalComponent, { windowClass: 'my-own-styles' }).

【讨论】：