我正在尝试根据组件的输入变量绑定和解绑HostListener click事件。
该组件是一个弹出窗口,只有一个名为show
的输入变量。该输入变量保存着弹出窗口的激活/非激活状态。我想在整个文档上触发click事件,但只限于输入变量show
设置为true时。
是否有一种方法可以在我现有的ngOnChanges函数内绑定和解绑hostlistener事件?
我目前的代码如下:
import {Component, OnInit, Input, ViewEncapsulation, HostListener} from '@angular/core';
@Component({
selector: 'custom-popup',
templateUrl: './popup.component.html',
styleUrls: ['./popup.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class PopupComponent implements OnInit {
@Input() show: boolean = false;
constructor() {
}
ngOnInit() {
}
@HostListener('document:click', ['$event.target'])
clickHandler(targetElement) {
// Custom code to handle click event
}
ngOnChanges(show: boolean) {
if (this.show) {
// Bind Click Event
}
else {
// Unbind Click Event
}
}
}
任何帮助和见解都将不胜感激。
show
吗?在ngOnChanges()
处理程序中设置和清除该标志,希望这意味着您想要发生的事情顺序将被执行。 - GregL