angular - ngx-bootstrap modal 没有自定义类

Question

我正在尝试为使用 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' }));

}

Answer 1

modal 元素在渲染的 HTML 中的 component 元素之外，应该关闭组件的 CSS 封装，或者应该在另一个文件中指定 class 的样式属性，以确保样式应用于 modal元素。请参考以下示例。

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