如何限制 ng 引导模式的 ng-deep 类？答案

【问题标题】：How to limit ng-deep class for ng bootstrap modal?如何限制 ng 引导模式的 ng-deep 类？
【发布时间】：2021-02-20 22:27:02
【问题描述】：

我想将 ng-deep 类限制为仅某个组件？我有课

::ng-deep .modal-dialog {
  display: flex;
  max-width: 1100px !important;
  overflow-x: hidden;
}

.modal-dialog 是模态的 ng 引导类。 modal-dialog 类不是我的类，我只运行 modal 类。这很好用，但是当我打开另一个不需要 max-width 并显示的模式时，.modal-dialog 类在它不应该处于活动状态的组件中被继承。

我知道如果我可以包装在一个类中就可以了，例如

.any-class { 

    ::ng-deep .modal-dialog {
      display: flex;
      max-width: 1100px !important;
      overflow-x: hidden;
    }
}

但 .modal-dialog 高于所有类

【问题讨论】：

标签： javascript angular twitter-bootstrap modal-dialog

【解决方案1】：

如果您使用 ng-bootstrap，打开对话框时有 2 个选项。

首先，您可以使用windowClass 向打开模式的窗口添加一个类。

    this.modalService
      .open(content, {
        ariaLabelledBy: "modal-basic-title",
        windowClass: "myDialog"
      })

其次，您可以使用container 选项传入要在其中打开模式的div的选择器。

添加到组件中的 html

<div id="myModal"></div>

然后是模态服务。

 this.modalService
  .open(content, {
    ariaLabelledBy: "modal-basic-title",
    container: "#myModal"
  })

这将导致从组件树中打开对话框。

更多模态选项可以在这里找到：https://ng-bootstrap.github.io/#/components/modal/api#NgbModalOptions

对于 ngx-bootstrap：

使用class 或id 选项将特定选择器添加到您的模态，使用它来定位最大宽度

openModalWithClass(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(
      template,
      Object.assign({}, { class: 'myDialog' })
    );
  }

参考：https://valor-software.com/ngx-bootstrap/#/modals#service-custom-css-class

【讨论】：

我正在使用 ngx 引导程序