ngx-bootstrap modual 没有自定义类

Question

我正试图为使用BsModelService创建的模式定义一个新的宽度。我不能通过给他上定制课来改变这一点。仅通过使用诸如"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

模态元素在呈现的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;
}