Question

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

.IcuTransform("latingreek", lg => lg.Id("Latin-Greek; NFD; [:Nonspacing 
Mark:] Remove; NFC").Direction(IcuTransformDirection.Forward))

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

其他方法如何通过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)
  //}

}

Answer 4

我修好了它：

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

检测鼠标点击Angular2的任何位置

4 个答案: