通过单击背景或模式外部停止关闭模式答案

【问题标题】：stop closing the modal by clicking backdrop or outside the modal通过单击背景或模式外部停止关闭模式
【发布时间】：2020-10-14 00:23:06
【问题描述】：

我在我们的代码中使用了一个 angular2 ng-bootstrap 模态。

我希望在模态框外单击时模态框不会关闭。目前，在点击外部时，模式正在关闭。

在 angular1 中，我曾经通过 [keyboard]="false" [backdrop]="'static'" 来执行此操作。但这是它在 angular2 中不起作用的时候了。

这是我的plunker

我的打开方法如下：

  open() {
    const modalRef = this.modalService.open(NgbdModalContent);
    modalRef.componentInstance.name = 'World';
  }

【问题讨论】：

标签： angular ng-bootstrap

【解决方案1】：

根据@anshuVersatile 的回答，我知道我们需要使用一些模态选项。

然后我创建一个NgbModalOptions 的对象并将其作为我的 open 方法的第二个参数传递，它就可以工作了。

代码如下：

let ngbModalOptions: NgbModalOptions = {
      backdrop : 'static',
      keyboard : false
};
console.log(ngbModalOptions);
const modalRef = this.modalService.open(NgbdModalContent, ngbModalOptions);

这是更新后的plunker。

【讨论】：

请注意，有一个类似但完全独立的角度引导库“ngx-bootstrap”。为此，您需要设置的选项有所不同 - 请参阅 valor-software.com/ngx-bootstrap/#/…。你需要let config = { backdrop: true, ignoreBackdropClick: true }; 然后... this.modalService.show(SomeComponent, config);
loading... in plunker => Error {originalErr: Error, constructor: Object}

【解决方案2】：

虽然已经很晚了，但它可能对面临这个问题的其他人有所帮助：

 const config: ModalOptions = {
                backdrop: 'static',
                keyboard: false,
                animated: true,
                ignoreBackdropClick: true,
                initialState: {
                  data1: 'new-user',
                  username: 'test'
                }
              };
              this.bsModalRef = this.modalService.show(MyComponent, config);

initialState 对象用于向 modal 传递数据。

【讨论】：

使用 ngx-bootstrap 和 angular 9

【解决方案3】：

$modal.open({
   // ... other options
   backdrop  : 'static',
   keyboard  : false
});

在创建模式时，您可以指定其行为：

【讨论】：

是Angular2代码吗？我不这么认为。我期待 Angular2 代码。
是的，这个 is Angular 代码（实际上它只是 JavaScript，因为 ng-bootstrap 模态服务的选项只是一个对象字面量）。作为这个组件的作者，我也可以说这是一个正确的答案，应该被接受。干得好@anshuVersatile
我在这里使用的是 TypeScript 和 Angular2，而不是 JavaScript。

【解决方案4】：

如果 ngx-bootstrap/modal 在 angular 2+ (bsmodal) 中使用 [config]="{ background: 'static' }", .ts 文件之类的

import {ModalDirective} from 'ngx-bootstrap/modal';
@ViewChild('myModal') public myModal: ModalDirective;

 openpopup(){
     this.myModal.show()
  }

和.html之类的

<button class="btn btn-md btn-pill btn-success mb-3 pull-right" type="button" data-toggle="modal" (click)="openpopup()">Open</button>

 <div bsModal #myModal="bs-modal" class="modal fade"  [config]="{ backdrop: 'static' }"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Popup heading</h4>
          <button type="button" class="close" (click)="myModal.hide()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>

        <div class="modal-body">
          <!---- popup content here---->
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

【讨论】：

我把它当作答案。 [config]="{ 背景：'静态'}"

【解决方案5】：

在您的 component.ts 文件中

import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { ViewChild, TemplateRef } from '@angular/core';

//--------

constructor(
    private modalService: BsModalService
  ) {}

@ViewChild('sampleModal', {static: true}) sampleModalRef: TemplateRef<any>;

modalRef: BsModalRef;

config = {
    backdrop: true,
    ignoreBackdropClick: true
  };

//-------

open() {
    this.modalRef = this.modalService.show(this.sampleModalRef, this.config);
  }

HTML

<ng-template #sampleModal>
      .
      .
      .
      .
</ng-template>

【讨论】：