ngx-bootstrap modal 没有自定义类答案

【问题标题】：ngx-bootstrap modal doesn't get custom classesngx-bootstrap modal 没有自定义类
【发布时间】：2020-10-21 14:06:08
【问题描述】：

我正在尝试为使用 BsModalService 创建的模式定义新宽度。我不能通过给他一个自定义课程来改变它。只能使用给定的类，例如“modal-xl”。为什么？我应该在哪个文件中设置类样式？

openModal() {
const initialState = {
  type: 'form',
  headerTitle: 'Modal',
  actionButtonLabel: 'Submit',
  onConfirmation: this.onSubmitCliked
};
this.modalRef = this.bsModalService.show(
  ModalComponent,
  Object.assign({ initialState }, { class: 'kushkush' }));

}

【问题讨论】：

它在 ngx-bootstrap 6.2.0 版中为我工作！，也许问题出在其他地方

标签： angular ngx-bootstrap-modal

【解决方案1】：

模态元素在呈现的 HTML 中的组件元素之外，应该关闭组件的 CSS 封装，或者应该在另一个文件中指定类的样式属性，以确保应用样式到模态元素。请参考以下示例。

import { Component, TemplateRef, ViewEncapsulation } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  modalRef: BsModalRef;
  config = {
    animated: true,
    keyboard: true,
    backdrop: true,
    ignoreBackdropClick: false,
    class: "my-modal"
  };

  constructor(private modalService: BsModalService) { }

  openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template, this.config);
  }
}

CSS 类应如下所示。

.my-modal {
  border: solid 4px blue;
}

.my-modal .modal-header {
  background-color: lime;
}

.my-modal .modal-body {
  background-color: orange;
}

【讨论】：