私はangular2の関数にディレクティブをバインドできますか？

Question

私はangle2に簡単な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

これは、あなたが `@Input（ 'offClickを'）`を使用していないようです

@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>