перехватывающее событие dismiss модальное ngx-bootstrap

Question

Я использую Angular 6 и ngx-bootstrap 3.0.1

. Я отображаю модальное изображение и хочу показать подтверждение отказа / отмены, когда пользователь пытается закрыть модальное окно после обновленияform.

У меня нет проблем, когда пользователь использует мою пользовательскую кнопку закрытия, но я не знаю, как вызвать функцию закрытия, когда он использует щелчок по фону за пределами модальной области.

Как я могу аккуратно обработать фоновый щелчок, чтобы отобразить мое подтверждающее сообщение?

спасибо

Answer 1

На странице документации ngx-bootstrap вы можете легко найти свое решение: https://valor -software.com / ngx-bootstrap / # / modals # directive-events

Чтобы увидетькакие события запускаются,

На стороне вашего компонента,

import { Component, ViewChild } from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap/modal';

@Component({
  selector: 'demo-modal-events',
  templateUrl: './events.html',
  styles: [`
    .card {
      margin-bottom: 0.75rem;
      padding: 8px;
    }
  `]
})
export class DemoModalEventsComponent {
  @ViewChild(ModalDirective) modal: ModalDirective;
  messages: string[];

  showModal() {
    this.messages = [];
    this.modal.show();
  }
  handler(type: string, $event: ModalDirective) {
    this.messages.push(
      `event ${type} is fired${$event.dismissReason
        ? ', dismissed by ' + $event.dismissReason
        : ''}`
    );
  }
}

На стороне вашего шаблона,

<code><button type="button" class="btn btn-primary" (click)="showModal()">Open a modal</button>
<br><br>
<pre class="card card-block card-header" *ngFor="let message of messages">{{message}}

Модальные × Просто еще один модальный
Нажмите × , нажмите Esc или нажмите на фоне, чтобы закрыть модальный.

ОБНОВЛЕНИЕ:

Как я понимаю, вы можете проверить событие $ следующим образом:

if($event.dismissReason == 'backdrop-click')
this.myFunc();