NgbModal - 自定义类样式

Question

我有一个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％的高度？

Answer 1

使用windowClass的NgbModalOptions

    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'属性，但它没有用。我会添加自定义类声明，模态看起来完全一样。

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

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

将该行添加到我的@Component声明后，以及自定义类，所有样式都有效。

Answer 3

添加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）中，因为该模型不是当前组件的一部分