html
次のコンポーネントの HTML でボタンを次のようにします
<button type="button">送信する</button>
↓ ( appOnClickDisable="1" を追加 )
<button
appOnClickDisable="1"
type="button" >
送信する
</button>
カスタムディレクティブを作成します app/directives/app-on-click-disable.directive.ts
import { Directive, HostListener, Input, Renderer2 } from '@angular/core';
@Directive({
selector: '[appOnClickDisable]'
})
export class AppOnClickDisableDirective {
@Input() appOnClickDisable: number;
constructor(
private renderer: Renderer2,
) { }
@HostListener('click', ['$event']) onClick(event) {
console.log( 'AppOnClickDisableDirective clicked' );
if ( this.appOnClickDisable == 1 ){
event.target.disabled = true;
}
}
}
app.module.ts で読み込みます app/app.module.ts
import { AppOnClickDisableDirective } from './directives/app-on-click-disable.directive';
@NgModule({
declarations: [
AppComponent,
AppOnClickDisableDirective, // 追加
],
以上で一度クリックするとボタンが disabled になります。 ( disabled解除は app-on-click-disable.directive.ts ソース内に実装する必要があります。)