ng-bootstrap：如何覆盖模态窗口 html答案

【问题标题】：ng-bootstrap: How to overwrite modal window htmlng-bootstrap：如何覆盖模态窗口 html
【发布时间】：2020-03-05 19:16:20
【问题描述】：

我将 ng-bootstrap 用于我的模态。我想知道自定义模态窗口的 html 的最佳方法是什么。

默认情况下，模态 html 看起来像

<div role="document" class="modal-dialog">
  <div class="modal-content">
    //template or component
  </div>
</div>

我希望在每个模态中都有几个元素。我想将这些元素添加到 ng-bootstrap 生成的 html 中，这样我就不必一直在模板中写出来了。

有没有很好的简单方法来做到这一点？

【问题讨论】：

将包装器组件写入ng-bootstrap modal 并在那里添加您的自定义html/css？
如果可能的话，我想在 div 中添加额外的元素，类为 'modal-dialog'。

标签： angular bootstrap-modal ng-bootstrap

【解决方案1】：

您可以通过 windowClass: 'myModal' 添加自定义类

open(content) {
this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title', size: 'sm', backdropClass: 'light-blue-backdrop', windowClass: 'dark-modal'}).result.then((result) => {
  this.closeResult = `Closed with: ${result}`;
}, (reason) => {
  this.closeResult = 'lol';
});

}

有关更多信息和选项，请参阅：https://stackblitz.com/run?file=app/modal-options.ts

【讨论】：