我如何將一個指令綁定到angular2中的函數？

Question

我在angular2中創建了一個簡單的offClick指令，它的工作原理就像這樣。

import { Directive, Host, Input, Output, EventEmitter, ElementRef } from '@angular/core'; 

@Directive({ 
    selector: '[offClick]', 
    host: { 
     '(document:click)': 'onClick($event)', 
    } 
}) 

export class OffClickDirective { 
    @Input('offClick') a; 

    @Output('off') 
    offClicked = new EventEmitter(); 

    constructor(
     private elementRef: ElementRef) { 

    } 

    onClick($event) { 
     $event.stopPropagation(); 

     if (!this.elementRef.nativeElement.contains($event.target)) 
      this.offClicked.emit({}); 
    } 
} 

但是要將此添加到HTML元素，我必須做這樣的事情。

<div [offClick] (off)="onOffClick($event)"></div> 

反正是有，我可以改變這個指令，這樣我就可以使用它像這樣一個HTML元素

<div (offClick)="onOffClick($event)"></div> 

OR

我基本上不想有申報標記爲指令，然後另一個捕捉事件....

在此先感謝

Answer 1

這應該做你想要

@Directive({ 
    selector: '[offClick]', 
    host: { 
     '(document:click)': 'onClick($event)', 
    } 
}) 

export class OffClickDirective { 
    @Output('offClick') 
    offClicked = new EventEmitter(); 

    constructor(
     private elementRef: ElementRef) { 

    } 

    onClick($event) { 
     $event.stopPropagation(); 

     if (!this.elementRef.nativeElement.contains($event.target)) 
      this.offClicked.emit({}); 
    } 
} 

<div (offClick)="onOffClick($event)"></div>