在点击事件之外访问ngx-bootstrap模态

如何解决在点击事件之外访问ngx-bootstrap模态

我正在从我的应用程序组件中的ng-template内调用ngx-bootstraps modal。我已经在stackBlitz example

中建立了当前设置

如您所见，我在模式取消/关闭按钮中添加了另一个事件-单击这些事件时会触发两个事件。一个关闭模态，另一个执行“其他”。

我希望能够将此“其他”应用到在模态外部单击时触发的“背景”事件。默认情况下，单击背景幕（<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1>Insert your skills</h1> <div class="copycat"> <div id="form"> <form action="" method="post" name="addbloc"> <p> <label for="tpl">Family :</label> <!--instead of id added data-id --> <select name="tpl" id="tpl"> <option value="">-- Select your family --</option> <option value="Language" data-id='champ1'>Language</option> <option value="Cooking" data-id='champ2'>Cooking</option> </select><br /> <!--added data-id--> <div class="champ" data-id="champ1"> <label for="Language">Skill :</label> <select name="Language" id="Language"> <br/> <option value="">-- Select your skill --</option> <option value="Spanish" data-id='#champ1'>Spanish</option> <option value="Chineese" data-id='#champ1'>Chineese</option> <option value="French" data-id='#champ1'>French</option> </select><br /> <input onclick="copycat();" id="button" value="+" type="button"> </div> <!--added data-id--> <div class="champ" data-id="champ2"> <label for="Cooking">Skill :</label> <select name="Cooking" id="Cooking"> <br/> <option value="">-- Select your skill --</option> <option value="Italian" data-id='#champ2'>Italian</option> <option value="Mexican" data-id='#champ2'>Mexican</option> <option value="Japanese" data-id='#champ2'>Japanese</option> <option value="Greek" data-id='#champ2'>Greek</option> </select><br /> <input onclick="copycat();" id="button" value="+" type="button"> </div> </p> </form> </div> </div> <!-- WIP ----- Submit button to store in database --> <div style="z-index:99;"><input type="submit" name="Submit" value="Submit" class="bouton"></div>时，模式关闭。有用于删除关闭行为（this.modalRef.hide();）的配置，但这不是我想要的。我希望能够保留默认行为，并添加其他功能，如模态上的其他触发器一样。

所以我需要能够“访问”背景事件以对其应用功能-没有html句柄可以在其中进行操作。

StackBlitz example

component.html

ignoreBackdropClick

component.ts

<ng-template #printTemplate>
    <div class="modal-header">
        <h4>Title</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="cancel(); anotherFunc()">
            <span aria-hidden="true" class="red">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <app-some></app-some>
    </div>
    <div class="modal-footer d-block">
        <button class="btn btn-secondary float-right mr-4" (click)="cancel(); anotherFunc()">Cancel</button>
    </div>
</ng-template>

解决方法

要实现您的要求，请在模态显示并单击背景幕后阅读事件backdrop-click。这是工作中的fork。

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

openModal(printTemplate: TemplateRef<any>) {
  this.modalRef = this.modalService.show(printTemplate,this.config);
  this.modalRef.onHide.subscribe((reason: string | any) => {
    if(reason === 'backdrop-click') {
      this.myFunc(); // run your function here
    }
  });
};

注意：在ngx-bootstrap 6.1.0上进行了测试，在某些版本中，键入似乎已损坏，但可以通过更改键入来修复。