自訂改變元素行為的屬性行指令

使用者按下按鈕後，會透過@HostListener擷取按鈕事件，讓使用者確認後觸發confirm事件，讓父元件執行所需作業

src/app/app.component.html

@@ -1,5 +1,3 @@
-<button type="button">一般按鈕</button>
-<button type="button" appCustomButton>套用指令的按鈕</button>
-<button type="button" #button="customButton" appCustomButton>
-  套用指令的按紐
-</button>
+<button appButtonConfirm="是否確認?"
+(confirm)="onConfirm()">
+按鈕</button>

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { CustomButtonDirective } from './custom-button.directive';
+
 import { Component, ViewChild, OnInit } from '@angular/core';
 
 @Component({
@@ -6,10 +6,9 @@ import { Component, ViewChild, OnInit } from '@angular/core';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
 })
-export class AppComponent implements OnInit{
-  @ViewChild('button',{static:true}) button!:CustomButtonDirective;
-  ngOnInit(): void {
-    this.button.changeColor('red');
-  }
+export class AppComponent {
+onConfirm():void{
+  alert('確定');
+}
 
 }

src/app/app.module.ts

@@ -3,11 +3,11 @@ import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
-import { CustomButtonDirective } from './custom-button.directive';
+import { ButtonConfirmDirective } from './button-confirm.directive';
 
 @NgModule({
   imports:      [ BrowserModule, FormsModule ],
-  declarations: [ AppComponent, CustomButtonDirective ],
+  declarations: [ AppComponent, ButtonConfirmDirective ],
   bootstrap:    [ AppComponent ]
 })
 export class AppModule { }

src/app/button-confirm.directive.ts

@@ -0,0 +1,19 @@
+import { outputAst } from '@angular/compiler';
+import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
+
+@Directive({
+  selector: 'button[appButtonConfirm]'
+})
+export class ButtonConfirmDirective {
+@Input('appButtonConfirm') message!:string;
+@Output() confirm= new EventEmitter<void>();
+
+@HostListener('click', ['$event'])
+clickEvent(event:Event){
+  event.preventDefault();
+  event.stopPropagation();
+  if(confirm(this.message)){
+    this.confirm.emit();
+  }
+}
+}

src/app/custom-button.directive.ts

@@ -1,20 +0,0 @@
-import { Directive, ElementRef, OnInit, Renderer2 } from '@angular/core';
-
-@Directive({
-  selector: '[appCustomButton]',
-  exportAs:'customButton',
-})
-export class CustomButtonDirective implements OnInit {
-  constructor(private elRef: ElementRef, private renderer: Renderer2) {}
-
-  ngOnInit(): void {
-    this.renderer.setStyle(this.elRef.nativeElement, 'padding', '10px');
-    this.renderer.setStyle(this.elRef.nativeElement, 'fontSize', '14pt');
-    this.renderer.setStyle(this.elRef.nativeElement, 'fontWeight', 'bold');
-  }
-  changeColor(color:string): void{
-    this.renderer.setStyle(
-      this.elRef.nativeElement, 'color', color
-    );
-  }
-}

src/app/task.ts

@@ -1,9 +0,0 @@
-export class Task {
-  constructor(initData?: Partial<Task>) {
-    Object.assign(this, initData);
-  }
-
-  TaskSn!: string;
-  TaskName!: string;
-  State!: string;
-}