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

Question

我目前在 Angular 应用程序中使用自定义主题，我需要在ngb -modal-window内部的“ .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 ”容器？

score 1 · Accepted Answer

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

TS：

{ windowClass: 'window-class' }

SCSS：

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

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

score 0 · Accepted Answer

查看该文档的“示例”部分。秘密在于组件定义的顶部：

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

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

2 回答 2