使用ngx-bootstrap modalService时添加自定义类的方法

Question

在这里查看ngx-bootstrap 源代码时:

莫代尔,options.class.ts

有一个可选的class property定义为class?: string;.

使用它的方法是什么？

是否可以添加自定义类,如:

this.modalService.config.class = 'myClass';

在使用servive之前,例如:

this.modalRef = this.modalService.show(template, {
  animated: false
});

这样,我认为我们可以将自定义CSS添加到显示的模态中

最佳实践或示例是什么？

我试图添加自定义类但没有成功

该类属性不是数组,如果适用,是否意味着我们只能添加一个自定义类？

演示:通过添加和覆盖modal类,模式不显示

https://stackblitz.com/edit/ngx-bootstrap-3auk5l?file=app%2Fapp.component.ts

以modal这种方式添加类没有帮助:

this.modalRef = this.modalService.show(template, Object.assign({},
                this.config, { class: 'gray modal-lg modal' }));

https://stackblitz.com/edit/ngx-bootstrap-awmkrc?file=app%2Fapp.component.ts

Answer 1

根据有关Modal组件的ngx-bootstrap 文档(请参阅组件选项卡),您可以class向config对象添加成员.

要点:由于模态元素在呈现的HTML中的组件元素之外,因此应该为组件关闭CSS封装,或者应该在另一个文件中指定类的样式属性,以确保应用样式到模态元素.

下面的代码片段可以在这个stackblitz中执行.

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

更新:此另一个stackblitz显示了从外部文件导入的CSS样式的示例styles.css,允许将CSS封装保留在组件中.