自訂Angular 指令 ==> 自訂變更元素樣式的屬性型指令(Attribute directive)

src/app/app.component.html

@@ -1,2 +1,2 @@
-<app-font-size [(size)]="fontSize" *ngIf="display"></app-font-size>
-<p [style.fontSize.pt]="fontSize">目前文字尺寸：{{ fontSize }} pt</p>
+<button type="button">一般按鈕</button>
+<button type="button" appCustomButton>套用指令的按鈕</button>

src/app/app.component.ts

@@ -1,28 +1,8 @@
-import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
-
-import { FontSizeComponent } from './font-size/font-size.component';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'my-app',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
 })
-export class AppComponent implements OnInit, AfterViewInit {
-  @ViewChild(FontSizeComponent) size!: FontSizeComponent;
-  @ViewChild(FontSizeComponent, { static: true })
-  staticSize!: FontSizeComponent;
-
-  display = true;
-
-  fontSize = 12;
-
-  ngOnInit(): void {
-    console.log('AppComponent - ngOnInit - size', this.size);
-    console.log('AppComponent - ngOnInit - staticSize', this.staticSize);
-  }
-
-  ngAfterViewInit(): void {
-    console.log('AppComponent - ngAfterViewInit - size', this.size);
-    console.log('AppComponent - ngAfterViewInit - staticSize', this.staticSize);
-  }
-}
+export class AppComponent {}

src/app/app.module.ts

@@ -1,14 +1,13 @@
-import { FontSizeComponent } from './font-size/font-size.component';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
-
+import { CustomButtonDirective } from './custom-button.directive';
 
 @NgModule({
   imports:      [ BrowserModule, FormsModule ],
-  declarations: [ AppComponent, FontSizeComponent ],
+  declarations: [ AppComponent, CustomButtonDirective ],
   bootstrap:    [ AppComponent ]
 })
 export class AppModule { }

src/app/custom-button.directive.ts

@@ -0,0 +1,14 @@
+import { Directive, ElementRef, OnInit, Renderer2 } from '@angular/core';
+
+@Directive({
+  selector: '[appCustomButton]',
+})
+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');
+  }
+}

src/app/font-size/font-size.component.html

@@ -1,6 +0,0 @@
-<button type="button" [disabled]="size === 16" (click)="onSetFontSize(1)">
-  增加 1 pt
-</button>
-<button type="button" [disabled]="size === 10" (click)="onSetFontSize(-1)">
-  減少 1 pt
-</button>

src/app/font-size/font-size.component.ts

@@ -1,16 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-@Component({
-  selector: 'app-font-size',
-  templateUrl: './font-size.component.html',
-  styleUrls: ['./font-size.component.css']
-})
-export class FontSizeComponent {
-  @Input() size!: number;
-  @Output() sizeChange = new EventEmitter<number>();
-
-	onSetFontSize(value: number): void {
-	  this.size += value;
-    this.sizeChange.emit(this.size);
-	}
-}