Question

我正在使用ng-bootstrap为我的angular2项目打开一个模态。如果我点击外面和ESC按钮，模态就会消失。我想限制这两种行为。下面是我打开模态的代码

import { NgbModal, NgbModalOptions } from '@ng-bootstrap/ng-bootstrap';
.....
modalOption: NgbModalOptions = null;
constructor(
private modalService: NgbModal,
....
}
....
//the method I am using to open a modal
openAddModal() {
    this.modalOption.backdrop = 'static';
    this.modalOption.keyboard = false;
    const modalRef =  this.modalService.open(PremiumProtectionComponent,this.modalOption);
    .....
}

PremiumProtectionComponent是模态的ts文件。

下面是我调用方法的HTML

<a (click)="openAddModal()">Click to open modal</a>

有人能告诉我实现这种行为的正确方法吗？提前致谢

Answer 1

您需要在modalOptions object 上设置backdrop和keyboard属性，而不是null：

modalOption: NgbModalOptions = {}; // not null!

// ...

openAddModal() {
    this.modalOption.backdrop = 'static';
    this.modalOption.keyboard = false;
    const modalRef = this.modalService.open(PremiumProtectionComponent,this.modalOption);
}

Answer 2

您可以直接添加ngModelOptions。

openAddModal() {
    const modalRef = this.modalService.open(PremiumProtectionComponent,{
        backdrop: 'static',
        keyboard: false
    });
}

如果单击外部或ESC按钮，则限制ng-bootstrap模式关闭

2 个答案: