Javascript 检测鼠标在任意位置的点击角度2

我是打字脚本和angular 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('????');    
    }
}

---

问题有点不清楚，但当有文档时，上面的代码会被触发。单击也许，您可以创建新组件，在新组件中定义主机属性并使用其他组件

您可以使用（文档：单击）事件：

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

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

我修正了它：

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

---

如何通过文档（）注册侦听器的其他方法：

从'@angular/core'导入{Component，Inject，OnInit，HostListener，VERSION}；
从“@angular/platform browser”导入{DOCUMENT}”；
@组成部分({
选择器：“演示应用程序”，
模板：`
{{text}}
`
})
导出默认类DemoAppComponent实现OnInit{
公共文本：字符串
公开展览：布尔
//建造师
构造函数（@Inject（DOCUMENT）私有文档：DOCUMENT）{
document.addEventListener（'click'，this.onDocument1单击）；
this.text=“Angular”+VERSION.full
}
//初始化
ngOnInit（）{}
onDocument1Click（）{
this.show=！this.show
警报（this.show）
}
//在文档上添加hostlistner：单击
//@HostListener（“文档：单击”[“$event]”）
//onDocumentClick（事件：事件）：无效{
//this.show=！this.show
//警报（this.show）
//}
}

检查此完全有效的示例

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

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)
  //}

}