NgbModal - 自定义 Class 样式

Question

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

但是，无论我尝试什么，我都无法覆盖模态 window 的定位。我唯一能够改变的是 header/body 的背景颜色。

我的模态 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 文件没有效果。

任何人都可以告诉我如何覆盖默认的 bootstrap 样式，以便我可以强制它出现在屏幕的右侧并占据 100% 的高度吗？

Answer 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;
}

Answer 2

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

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

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

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

Answer 3

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

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) 因为模型不是当前组件的一部分

Answer 4

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

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

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

::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 用于不同的模态。

NgbModal - 自定义 Class 样式

NgbModal - Custom Class Styling

typescript

bootstrap-modal

ng-bootstrap

angular