单击外部时关闭模态 - 需要调用与在 Angular 2 中单击关闭模态按钮时相同的函数

Question

单击关闭模态按钮以及在模态外部单击鼠标时模态关闭我想调用与单击关闭模式按钮时调用的相同的函数，以及当我在模式外部单击时调用的函数。我不确定如何在 Angular 中执行此操作 2. 能否请您分享您的想法。此外，我的模态框是我的主要 html 的一部分，它没有单独的组件或 html... 谢谢

import { Component, OnInit, NgModule, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';
import * as jQuery from 'jquery';

export class Component implements OnInit {

  @ViewChild('newModal') newModal: ElementRef; 

public OpenModal(){
jQuery(this.newModal.nativeElement).modal('show');
}
public CloseModal(){
Includes actions taken when close modal button is clicked - I want the same function to be called with I click outside the model
}        
}

我在 html 中尝试了下面的方法，但每当我点击组件上除模态区域以外的任何地方时都是运行。

(clickOutside)="CloseModal()";

Answer 1

是的，根据您使用的模式，这很容易。通常，每个模态对话都有一个 onDismiss()-Observable，您可以订阅它。为确保它已被实例化，已在 AfterViewInit 中执行您的订阅。

ngAfterViewInit() {

  // react on modal closed by clicking beside it
  this.newModal.onDismiss.subscribe(() => {
    // here goes your code then
  });

}

这对我来说一直都是完美的。

Answer 2

我通过添加一个在本机元素外部单击并更改某些条件的功能解决了这个问题，它对我有用....

Answer 3

如果您使用的是 NgbModel

import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';

然后像这样调用它的内部构造函数：

constructor(private modalService: NgbModal)

并调用它自己的方法：

this.modalService.dismissAll();

无需传递任何参数

单击外部时关闭模态 - 需要调用与在 Angular 2 中单击关闭模态按钮时相同的函数

Modal closing when clicking outside it - needs to call same function as when clicked on close modal button in Angular 2

angular2-forms

angular2-directives

angular2-template

angular