检测鼠标点击任何地方Angular2

Question

我是打字稿和角度2的初学者，我的代码有错误！你能帮我解决这个问题吗？

import { Component, HostListener } from '@angular/core' 
export class TooltipComponent { 
    public show: boolean = false; 

    @HostListener('document:click',['$event'])  

    documentClick(event: MouseEvent) { 
     this.show = false;  
    } 

    showTooltip() { 
     this.show = true; 
     this.documentClick('????');  
    } 
} 

Answer 1

@HostListener('document:click', ['$event']) 
    public documentClick(event: Event): void { 
    //doSomething() --> Your logic when there is a document click 
    } 

问题是有点不清楚，但上面的代码时，有一个文件点击

Answer 2

也许，您可以创建新的组成部分，在新的组件定义的主机性能和使用的其他组件将被解雇

可以使用（文件：点击）事件：

@Component({ 
    host: { 
    '(document:click)': 'onClick($event)', 
    }, 
}) 
class SomeComponent() { 
    constructor(private _eref: ElementRef) { } 

    onClick(event) { 
    // Your codes... 
    } 
} 

Answer 3

我固定它：

import {ChangeDetectorRef, Renderer } from '@angular/core'; 

export class TooltipComponent { 

    public show: boolean = false; 

    clickListener: Function; 

    constructor(
     private elementRef: ElementRef, 
     private renderer: Renderer, 
    ) { 
     this.clickListener = renderer.listenGlobal(
      'document', 
      'click', 
      (event: MouseEvent) => this.documentClick(event) 
     ); 
    } 

    documentClick(event: MouseEvent) { 
     console.log(event.target); 
     if (!this.elementRef.nativeElement.contains(event.target)) { 
      this.show = false; 
     } 
    } 
} 

Answer 4

其他方式如何通过DOCUMENT注册监听器（plunker example）：

import {Component, Inject, OnInit, HostListener, VERSION} from '@angular/core'; 
import { DOCUMENT } from "@angular/platform-browser"; 

@Component({ 
    selector: 'demo-app', 
    template: ` 
    <div> 
     {{ text }} 
    </div> 
    ` 
}) 
export default class DemoAppComponent implements OnInit{ 

    public text: string 
    public show: boolean 

    //constructor 
    constructor(@Inject(DOCUMENT) private document: Document) { 

    document.addEventListener('click', this.onDocument1Click); 
    this.text = "Angular " + VERSION.full 
    } 

    //init 
    ngOnInit() { } 

    onDocument1Click(){ 
    this.show = !this.show 
    alert(this.show) 
    } 


    //add hostlistner on document:click 
    //@HostListener("document:click", ['$event']) 
    //onDocumentClick(event: Event): void { 
    // this.show = !this.show 
    // alert(this.show) 
    //} 

}