当我单击外部定义背景为静态时,NgbModal关闭

时间:2019-11-29 10:35:01

标签: angular

我使用NgbModal通过以下方式打开模板:

this.modalReference = this.modalService.open(template, MODAL_OPTIONS);

MODAL_OPTIONS的定义如下:

export const MODAL_OPTIONS: NgbModalOptions = {backdrop: 'static', keyboard: false};

文档指出,上面的MODAL_OPTIONS定义应该防止在我在模态之外单击时关闭模态。那也是在此thread中推荐的内容。但这对我不起作用。当我在外面单击时,模式仍然关闭。有人知道造成这种现象的原因吗?

2 个答案:

答案 0 :(得分:0)

尝试删除导出

let ngbModalOptions: NgbModalOptions = {
  backdrop : 'static',
  keyboard : false
};

const modalRef = this.modalService.open(template, MODAL_OPTIONS);

答案 1 :(得分:0)

https://stackblitz.com/run?file=app/modal-config.ts

请查看文档中的此示例。

您可以在组件中注入NgbModalConfig的实例,然后根据组件的要求进行更改。

// customize default values of modals used by this component tree
config.backdrop = 'static';
config.keyboard = false;

完整示例供参考

import { Component } from '@angular/core';
import { NgbModalConfig, NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-modal-config',
  templateUrl: './modal-config.html',
  // add NgbModalConfig and NgbModal to the component providers
  providers: [NgbModalConfig, NgbModal]
})
export class NgbdModalConfig {
  constructor(config: NgbModalConfig, private modalService: NgbModal) {
    // customize default values of modals used by this component tree
    config.backdrop = 'static';
    config.keyboard = false;
  }

  open(content) {
    this.modalService.open(content);
  }
}