这是单击外部以禁用选择的示例代码。在这个例子中,我可以取消选择,但只有在我点击元素以激活监听器之后。我想用这个例子随时关闭模态外的模态。任何一个例子将不胜感激。
activeIndex = 0;
subscription: any;
init$: Subject<any> = new Subject();
stop$: Subject<any> = new Subject();
ngOnInit() {
let click$ = Observable.fromEvent(document, 'click');
const clickOutside$ = this.init$.flatMap(() => {
return click$.takeUntil(this.stop$);
});
this.subscription = clickOutside$.subscribe(() => {
this.activeIndex = null;
console.log(1);
this.stop$.next();
});
}
onItemClicked(event, index: number) {
event.stopPropagation()
this.activeIndex = index;
this.init$.next()
}
ngOnDestroy() {
if(this.subscription) {
this.subscription.unsubscribe();
}
}
答案 0 :(得分:0)
所以我有一个例子说明我如何处理关闭我创建的自定义下拉列表,但我相信它也适用于此。
所以你的组件内部:
openModal() { document.addEventListener('click', this.offClickHandler.bind(this)); }
offClickHandler(event:any) {
if (!event.target.closest(".select-options") && !event.target.closest(".select-input")) {
// do whatever you want here
// close the modal
// call document.removeEventListener
}
}
所以这将在按钮和div之外寻找一个点击,但是对于你我只想将.closest()设置为你想要看到关闭的模态。然后在if语句中关闭你的模态。