角2允許指令以在同一時間

執行和動作我有一個指令，它防止了雙擊提交按鈕：角2允許指令以在同一時間

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

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

：

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; 
    } 
}

其中我然後共享模塊中使用

然後在app.module中使用它。現在，應用程序中的任何表單都可以在第一次點擊按鈕時正確禁用該按鈕。然而，現在形式中的原始行爲完全不能執行。就好像該指令已經完全優先於所有內容並防止其他事情發生。

我用下面的表單標籤：

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

然後在打字稿我只是用：

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

來源

2017-05-15 Andrew Junior Howard

listent提交而不是點擊 – JEY

@JEY嗯試過，但沒有工作。同樣的結果。 –

你能否在組件定義的地方提供模塊聲明？ – JEY

我用您的指令有小的變化

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 { }

正常工作。

來源

2017-05-29 11:33:07 Fakhry

角2允許指令以在同一時間

回答

相關問題