Блог

Я пытаюсь определить новую ширину для модала, созданного с помощью 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' }));
  

}

Модальный элемент находится за пределами элемента component в отображаемом 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;
}