NgbModal - 自定义类样式答案

【问题标题】：NgbModal - Custom Class StylingNgbModal - 自定义类样式
【发布时间】：2020-10-30 00:41:13
【问题描述】：

我有一个 Angular 6 应用程序，我正在尝试实现一个从屏幕右侧滑入的模式窗口，如下所示：https://codepen.io/anon/pen/OayRVy

但是，无论我尝试什么，我都无法覆盖模态窗口的定位。我唯一能改变的是标题/正文的背景颜色。

我的模态 HTML：

<ng-template #content let-modal="close">

      <div class="modal-header">
        <h4 class="modal-title" id="modal-basic-title">Table of Contents</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="dismissModal(modal)"><span aria-hidden="true">&times;</span></button>
      </div>

      <div class="modal-body">
        <p>
          ....
        </p>
      </div>

</ng-template>

组件代码：

  import {NgbModal} from '@ng-bootstrap/ng-bootstrap';

  constructor(private modalService: NgbModal) {}

  public open(content) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title', size: 'lg'}).result.then((result) => {
      ...
    }, (reason) => {
      ...
    });
  }

如果我检查 HTML 并在 Chrome DevTools 中将 float: right 属性添加到 .modal-dialog 容器，它将执行我想要的操作。但是，添加一个

.modal-dialog {
  float: right;
}

对我的组件的 .scss 文件没有影响。

谁能告诉我如何覆盖默认引导样式，以便我可以强制它出现在屏幕右侧并占据 100% 的高度？

【问题讨论】：

你说的模态窗口的定位是什么意思？

标签： angular typescript bootstrap-modal ng-bootstrap

【解决方案1】：

使用来自NgbModalOptions的windowClass

    this.modalService.open(
        content, 
        {
            ariaLabelledBy: 'modal-basic-title', 
            size: 'lg', 
            windowClass: 'custom-class'
        }
    )
    .result
    .then((result) => {
        // write your code here
    });

在 scss 中：

.custom-class {
    float: right;
}

【讨论】：

【解决方案2】：

如果您只需要修改模态中的现有类，例如.modal-content，您可以这样做：

::ng-deep .modal-content  {
  background-color: yellow;
}

如果你想使用自己的 CSS 类，这里有一个更复杂的例子：

::ng-deep .my-class {
  font-size: 2rem;
  .modal-dialog { 
    background-color: yellow;
    padding:1rem;
  }  
  .modal-content {
    color: white;
  }
  .modal-header {
    background-color: red;
  }
  .modal-body {
    background-color: green;
  }
}

在 *.ts 文件中：

this.modalService.open(content, { windowClass: 'my-class'})

请注意，如果您正在开发大型应用程序，则不希望使用 ::ng-deep，因为它会使 CSS 规则全局化（同样，它是 deprecated）。您可以将.my-class 放入styles.scss 或每个开发人员都知道“这里的所有规则都是全局的”的地方。这样你也可以有一个.my-class-2 用于不同的模式。

【讨论】：

好一个。简单有效的解决方案。 ::ng-deep .modal-content 为我做了诀窍。感谢您提供此解决方案。

【解决方案3】：

我曾尝试使用window.class: 'custom-class' 属性，但它不起作用。我会添加自定义类声明，模式看起来完全一样。

解决方案，来自https://ng-bootstrap.github.io/#/components/modal/examples 我最初模仿了我的模态。

他们在这里关键的一段代码，他们没有解释为什么需要它或它做了什么，所以我仍然不能完全确定自己，是encapsulation: ViewEncapsulation.None

将该行与自定义类一起添加到我的@Component 声明后，所有样式都起作用了。

【讨论】：

encapsulation: ViewEncapsulation.None 表示您关闭了组件封装，因此组件 scss 作为我们可能想要的全局 scss 的一部分填充，它打破了角度方式。我想做的是使用ng-deep，但目前我仍然遇到问题。

【解决方案4】：

添加encapsulation: ViewEncapsulation.None的解决方案的问题它破坏了组件的所有样式。我从角度文档中找到了另一个解决方案：：https://valor-software.com/ngx-bootstrap/#/modals#service-custom-css-class 通过 '''open-modal''' 方法，您可以添加自己的类，然后您可以访问该类并为模型建模。例如：

modalRef: BsModalRef;
  constructor(private modalService: BsModalService) {}

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

CSS：

.pupUp-image-modal {
    width: fit-content !important;
    max-width: 95% !important;
    max-height: 95%;
}

注意模型样式必须放在主样式文件（style.css）中因为模型不是当前组件的一部分

【讨论】：