Как связать директиву с функцией в угловом2?

Question

Я создал простую директиву offClick в angular2, которая работает так.

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> 

ИЛИ

Я в принципе не хотят иметь, чтобы объявить тег для директивы, а затем другой, чтобы поймать событие ....

Заранее благодарен

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>