如何在文档的任何位置单击关闭弹出窗口

Question

我有一个popover，我希望在click

上document的任何地方关闭

这是我的演示： https://stackblitz.com/edit/ionic-3bw7da?file=pages%2Fhome%2Fhome.html

现在它没有关闭，因为我不知道如何关闭它。

这是我的演示：https://stackblitz.com/edit/ionic-3bw7da?file=pages%2Fhome%2Fhome.html

请提前帮助我！

Answer 1

我回答了类似的问题，由于主机属性，你必须为你的组件添加一个监听器。在构造函数中注入ElementRef，名为＆＃34; element＆＃34;在这个例子中。

构造函数（私有元素：ElementRef）

passenger-status

我在这里回答了问题：Angular, resume event propagation

Answer 2

我没有成功在评论中格式化我的代码：/

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  host:{'(document:click)': 'onClick($event)',
}
})

export class HomePage {

    constructor(public navCtrl: NavController, private element: ElementRef) {

  }

  onClick(event) {
   // display event in console if outside of menu top bar
   if (this.element.nativeElement.contains(event.target)) {
     console.log(event);
     this.closeMenu();    
   } else {
    this.openMenu();    
   }

  openMenu() {
    this.showMoreBarItem = !this.showMoreBarItem;      
  }

  closeMenu() {
    if(this.showMoreBarItem) {
      this.showMoreBarItem = !this.showMoreBarItem;      
    }
  }}

重要提示：您必须将菜单组件分开才能完成，并且只在菜单组件中应用我的更改=＆gt;在您的情况下，例如在home.html中创建一个新组件！