我有一个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
请帮我提前谢谢！！！
【问题讨论】：
PopoverOptions并使用create(component, data,{enableBackdropDismiss: true, showBackdrop:true})
标签： angular typescript ionic-framework ionic3
我没有成功在评论中格式化我的代码：/
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;
}
}}
重要提示：您必须分离您的菜单组件来完成它，并且只在您的菜单组件中应用我的更改 => 在您的情况下，例如在 home.html 中创建一个新组件！
【讨论】：
我回答了一个类似的问题，你必须为你的组件添加一个监听器，这要归功于 host 属性。在本例中，在名为“element”的构造函数中注入 ElementRef。
构造函数（私有元素：ElementRef）
@Component({
selector...,
host: {'(document:click)': 'onClick($event)',}
});
onClick(event) {
if (!this.element.nativeElement.contains(event.target)) {
closeModal(); // or not
}
}
我在这里回答了这个问题：Angular, resume event propagation
【讨论】：