使用ngx-bootstrap modalService时添加自定义类的方法 [英] Way to add custom class when using ngx-bootstrap modalService

问题描述

查看 ngx-bootstrap

When looking to the ngx-bootstrap source code here:

模态-options.class.ts

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

使用它的方式是什么?

是否可以添加一个自定义类，例如:

Is it possible to add a custom class like:

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

例如，在使用辅助词之前:

Before using the servive as for example:

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

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

This way, I think we can add custom CSS to the displayed modal

我尝试添加自定义类，但没有成功.

I've tried to add a custom class without success.

该类属性不是数组(如果适用)，是否表示我们只能添加一个自定义类?

That class property is not an array, if applicable, does it mean that we can only add one custom class ?

演示::通过添加并覆盖 modal 类，该模式未显示

Demo: by adding and overriding the modal class, the modal is not showing

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

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

Adding the modal class this way do not help:

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

推荐答案

根据ngx-bootstrap 有关Modal组件的文档(请参见 component 标签)，您可以向配置对象添加 class 成员.

According to the ngx-bootstrap documentation about the Modal component (see the component tab), you can add a class member to the config object.

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

Important: Since the modal element is outside of the component element in the rendered HTML, the CSS encapsulation should be turned off for the component, or the style attributes for the class should be specified in another file, to make sure that the styles are applied to the modal element.

下面的代码段可以在 此stackblitz .

The code snippet below can be executed in this 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文件:

with a CSS file like this:

.my-modal {
  border: solid 4px blue;
}

.my-modal .modal-header {
  background-color: lime;
}

.my-modal .modal-body {
  background-color: orange;
}

更新:此其他stackblitz 显示了以下示例:从外部文件导入到 styles.css 中的CSS样式，从而可以将CSS封装保留在组件中.

Update: This other stackblitz shows an example of CSS styles imported from an external file into styles.css, allowing to keep the CSS encapsulation in the component.

这篇关于使用ngx-bootstrap modalService时添加自定义类的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！