2016-10-18 8 views

答えて

26
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

+0

@SonaGも参照してください。私はplnkrの例を修正しました。私は自分の携帯電話でテストしましたが、それは動作しているようです。 – AMagyar

+0

はい、クロムを使用しています。イベントリスナーを変更することができます。それはうまくいくはずです – AMagyar

+0

DOMから要素を削除するngIfは、クリックイベントの前に発生するので、これは、トリガー要素内のngIfによって制御される要素がある場合、機能しません:http://plnkr.co/edit/spctsLxkFCxNqLtfzE5q? p = preview –

1

AMagyarの答えに代わります。このバージョンは、ngIfでDOMから削除された要素をクリックすると動作します。

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

関連する問題