角度2、私は送信ボタンをダブルクリックを防止ディレクティブを持って

Question

同時にディレクティブは実行して行動することを許可する：

私は、共有モジュールで使用しているうち

import { Directive, Component, OnInit, AfterViewInit, OnChanges, SimpleChanges, HostListener, ElementRef, Input, HostBinding } from '@angular/core'; 

@Directive({ 
    selector: 'button[type=submit]' 
}) 
export class PreventDoubleSubmit { 

    @HostBinding() disabled:boolean = false; 

    @Input() valid:boolean = true;  

    @HostListener('click') 
    onClick() { 
     console.log("aaa"); 
    this.disabled = true; 
    } 
} 

：

import { NgModule } from '@angular/core'; 
import { PreventDoubleSubmit } from '../shared/prevent-double-submit.directive'; 

@NgModule({ 
    declarations: [ 
     PreventDoubleSubmit 
    ], 
    exports: [ 
     PreventDoubleSubmit 
    ] 
}) 
export class SharedModule{} 

これをapp.moduleで使用します。アプリ内のどのフォームでも、最初にクリックしたときにボタンが正しく無効になります。しかし、フォーム内の元のアクションは現在全く実行されません。それは、指示がすべてを優先し、何か他のことが起きないようにしているかのようです。

<form (ngSubmit)="onSubmit(f)" #f="ngForm" class="generalForm"></form> 

そしてtypescriptですで、私はちょうど使用します：

私は、次のformタグ使ってい

onSubmit(form: NgForm) { 
     console.log("This is the code I want to perform"); 
} 

Answer 1

が、私は小さな変更であなたのディレクティブを使用し

import { Directive, HostListener, Input, HostBinding } from '@angular/core'; 

@Directive({ 
    selector: 'button[name=saveButton]' 
}) 
export class PreventDoubleSubmit { 

    @HostBinding() disabled: boolean = false; 

    @Input() valid: boolean = true; 

    @HostListener('click') 
    onClick() { 
     console.log("saveButton is disabled"); 
     this.disabled = true; 
    } 
} 

それをapp.moduleにインポートしました

@NgModule({ 
    imports:[...], 
    declarations: [ 
... 
PreventDoubleSubmit, 
... 
] 
export class AppModule { } 

私とうまく働いています。