Detect click outside Угловой компонент

Question

Как определить числа щелчков снаружи Компонент в Angular?

Answer 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'; 
    } 
} 

Plunker working example - click here

Answer 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; 
 
    }