我正在尝试以编程方式触发文档单击。
我的测试组合显示在页面中的多个位置,我想在单击测试组合或触发文档单击时将它们全部隐藏。
@Component({
selector: 'test-comp',
template: `<div *ngIf="showMe">stuff</div> and more…`
})
export class TestComponent {
showMenu: boolean;
constructor(public elementRef: ElementRef) {
}
@HostListener('document:click', ['$event'])
documentClick(event: MouseEvent) {
//hide my component when there is a document click
this.toggleComponent();
}
toggleComponent() {
// I am trying to programmatically fire a document click here to hide all test-comp if the test-comp
// component itself is clicked
// this.elementRef.nativeElement will select all test-comp component but not sure what to do next
this.showMe = !this.showMe;
}
我不知道如何在我的内部以编程方式触发文档单击toggleComponent
方法。有办法做到吗?多谢!
你可以触发一个click
使用任何元素上的事件HTMLElement.click() //mdn.io/click:
document.getElementById('myEl').click() // or the hacky id reference `myEl.click()`
你不能单击文档因为它不是渲染元素。但你可以点击全身:
document.body.click()
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)