Как я могу обнаружить клики вне компонента в Angular?
Обнаружение щелчка вне компонента Angular
Ответ 1
import { Component, ElementRef, HostListener, Input } from '@angular/core';
@Component({
selector: 'selector',
template: '
<div>
{{text}}
</div>
'
})
export class AnotherComponent {
public text: String;
@HostListener('document:click', ['$event'])
clickout(event) {
if(this.eRef.nativeElement.contains(event.target)) {
this.text = "clicked inside";
} else {
this.text = "clicked outside";
}
}
constructor(private eRef: ElementRef) {
this.text = 'no clicks yet';
}
}
Ответ 2
Альтернатива AMagyar ответ. Эта версия работает, когда вы нажимаете на элемент, который удаляется из DOM с помощью ngIf.
http://plnkr.co/edit/4mrn4GjM95uvSbQtxrAS?p=preview
private wasInside = false;
@HostListener('click')
clickInside() {
this.text = "clicked inside";
this.wasInside = true;
}
@HostListener('document:click')
clickout() {
if (!this.wasInside) {
this.text = "clicked outside";
}
this.wasInside = false;
}
Ответ 3
Вы можете использовать метод clickOutside() из пакета https://www.npmjs.com/package/ng-click-outside