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

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

解决方案来自https://ng-bootstrap.github.io/#/components/modal/examples ，我最初是在它之后为我的模态建模的。

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

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

Answer 2

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 3

如果您只需要修改模态中的现有类，例如.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 规则成为全局的（而且，它已被弃用）。你可以把.my-class在styles.scss或其他地方，每一个开发者都知道，“这里所有的规则是全球性的。” 这样你也可以有.my-class-2一个不同的模式。