ngx-bootstrap模态不获取自定义类

问题描述

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

}

解决方法

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

electronize.exe build /target custom "win-x86;win" /dotnet-configuration Debug /electron-arch ia32

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