Angular2クリック処理を変更する命令

Question

特定の要素の動作を変更するために、Angular2属性ディレクティブを記述しようとしています。具体的には、クリックハンドラを持つ特定の要素に属性を適用して、特定の条件でバインドされた関数が実行されないようにしたいとします。

は、だから今、私は要素例えば：

<button (click)="onClick(param1, param2)"></button> 

を持っているのonClickは、いくつかの仕事をして、ボタン要素をホストコンポーネントに宣言された関数です。

<button (click)="onClick(param1, param2)" online-only></button> 

などのディレクティブがあります：私がやりたい何

のようなものを書きで

@Directive({ 
    selector: '[online-only]', 
}) 
export class OnlineOnlyDirective { 
    @HostListener('click', ['$event']) 
    onClick(e) { 
    if(someCondition){ 
     e.preventDefault(); 
     e.stopPropagation(); 
    } 
    } 
} 

をしかしハンドラをクリックしますので、機会に私の指示を与えていない、最初に実行されますその実行を停止する。

私は自分のハンドラ（[onlineClick] = "onClick"）に置換（クリック）し、指示が​​適切だと思ったときに渡された関数を実行すると思っていましたが、onClick関数にパラメータを渡すことはできません見て少し怪しいです。

あなたはそのようなことをすることについて考えていますか？

Answer 1

Angularが強制的に特定のイベントハンドラを実行する方法がわかりません。これまでのところ、これはあなたが（ちょうど結合（クリック）を使用して）ことをやってみたかった方法では不可能である

<button (myClick)="onClick(param1, param2)" online-only></button> 

@Directive({ 
    selector: '[myClick]', 
}) 
export class OnlineOnlyDirective { 
    @Output() myClick: EventEmitter = new EventEmitter(); 
    @HostListener('click', ['$event']) 
    onClick(e) { 
    if(someCondition){ 
     e.preventDefault(); 
     e.stopPropagation(); 
    } else { 
     this.myClick.next(e); 
    } 
    } 
} 

Answer 2

：回避策は次のようにカスタムイベントを使用するかもしれません。これはAngular - > by（クリック）バインディング@HostListnerで登録されたすべてのイベントが単一のリスナー経由でプロキシされるためです。このためstopPropagation以上を正しく呼び出すのはstopImmediatePropagationで、別のイベントリスナーを持たないためです。詳細については、この問題を参照してください。https://github.com/angular/angular/issues/9587