禁用bootstrap模态区域外的单击事件以关闭角度4中的模态

Question

我是anguar4的新手。我在我的项目中使用bootstrap模式。单击模态外部时，模态将隐藏。这是我的代码

//在html中

<div bsModal #noticeModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" 
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true">

    <div class="modal-dialog modal-md">
        <div class="modal-content">
              Hello World
        </div>
    </div>
</div>

//在ts代码中

@ViewChild('noticeModal') public noticeModal: ModalDirective;

ngAfterViewInit() {
   this.noticeModal.show();
};

Answer 1

请在html中添加此配置。希望它能帮助你解决问题。

<div bsModal #noticeModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" 
    [config]="{backdrop: 'static',  keyboard: false}" 
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true">

    <div class="modal-dialog modal-md">
        <div class="modal-content">
              Hello World
        </div>
    </div>
</div>

Answer 2

下面的解决方案为我工作时通过添加{backdrop: 'static', keyboard: false}；调用模态 - > $('#myModal').modal({backdrop: 'static', keyboard: false})；

它适用于我，而无需将bsModal添加到<div>或任何指令模块中。

更清晰的解决方案如下所示：HTML：

 <div #crudModal class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal Title</h4>
      </div>
      <div class="modal-body">        
      </div>
      <div class="modal-footer">       
      </div>
    </div>
  </div>
</div>

在.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

@ViewChild('crudModal') crudModal: ElementRef;

openModal() {
    $(this.crudModal.nativeElement).modal({backdrop: 'static', keyboard: false});
}

希望能帮助到你。