UseClass抽象服務

App.component內部provider使用useClass:OrderDiscountService
可以直接抽換原本的訂單服務，降低改版對於整體的影響

src/app/app.component.css

@@ -7,7 +7,7 @@ table {
   border-collapse: collapse;
 }
 
-tr > td:first-child {
+tr > td {
   text-align: center;
 }
 

src/app/app.component.html

@@ -1,2 +1,14 @@
-<app-font-size></app-font-size>
-<app-other></app-other>
+<table border="1">
+  <tr>
+    <th>單價</th>
+    <th>數量</th>
+  </tr>
+  <tr *ngFor="let item of orderService.details">
+    <td>{{ item.UnitPrice }}</td>
+    <td>{{ item.PurchaseCount }}</td>
+  </tr>
+  <tr>
+    <td>總金額</td>
+    <td>{{ total }}</td>
+  </tr>
+</table>

src/app/app.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-import { FontSizeService } from './font-size.service';
 
+import { OrderDetail } from './order-detail';
+import { OrderService } from './order.service';
 
 @Component({
   selector: 'my-app',
@@ -8,9 +9,15 @@ import { FontSizeService } from './font-size.service';
   styleUrls: ['./app.component.css'],
 })
 export class AppComponent implements OnInit {
-  constructor(public fontSizeService: FontSizeService) {}
+  total = 0;
+
+  constructor(public orderService: OrderService) {}
 
   ngOnInit(): void {
-    this.fontSizeService.size = 10;
+    this.orderService.details = [
+      new OrderDetail({ PurchaseCount: 2, UnitPrice: 200 }),
+      new OrderDetail({ PurchaseCount: 4, UnitPrice: 50 }),
+    ];
+    this.total = this.orderService.computeTotal();
   }
 }

src/app/app.module.ts

@@ -3,12 +3,13 @@ import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
-import { OtherComponent } from './other/other.component';
-import { FontSizeComponent } from './font-size/font-size.component';
+import { OrderService } from './order.service';
+import { OrderDiscountService } from './order-discount.service';
 
 @NgModule({
-  imports:      [ BrowserModule, FormsModule ],
-  declarations: [ AppComponent, OtherComponent, FontSizeComponent ],
-  bootstrap:    [ AppComponent ]
+  imports: [BrowserModule, FormsModule],
+  declarations: [AppComponent],
+  providers: [{ provide: OrderService, useClass: OrderDiscountService }],
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

src/app/font-size.service.ts

@@ -1,8 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class FontSizeService {
-size!:number
-}

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

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

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

@@ -1,17 +0,0 @@
-import { FontSizeService } from './../font-size.service';
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-font-size',
-  templateUrl: './font-size.component.html',
-  styleUrls: ['./font-size.component.css']
-})
-export class FontSizeComponent {
-
-  constructor(public fontSizeService:FontSizeService) { }
-
-  onSetFontSize(value: number): void {
-    this.fontSizeService.size += value;
-  }
-
-}

src/app/order-detail.ts

@@ -0,0 +1,9 @@
+export class OrderDetail {
+  constructor(initData?: Partial<OrderDetail>) {
+    Object.assign(this, initData);
+  }
+
+  PurchaseCount!: number;
+
+  UnitPrice!: number;
+}

src/app/order-discount.service.ts

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+
+import { OrderDetail } from './order-detail';
+
+@Injectable()
+export class OrderDiscountService {
+  details: OrderDetail[] = [];
+
+  constructor() { }
+
+  computeTotal(): number {
+    const total = this.details
+      .map((d) => d.PurchaseCount * d.UnitPrice)
+      .reduce((act, curr) => act + curr, 0);
+    return total * 0.9;
+  }
+}

src/app/order.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+
+import { OrderDetail } from './order-detail';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class OrderService {
+  details: OrderDetail[] = [];
+
+  constructor() {}
+
+  computeTotal(): number {
+    return this.details
+      .map((d) => d.PurchaseCount * d.UnitPrice)
+      .reduce((act, curr) => act + curr, 0);
+  }
+}

src/app/other/other.component.html

@@ -1 +0,0 @@
-<p [style.fontSize.pt]="fontSizeService.size">目前文字尺寸：{{ fontSizeService.size }} pt</p>

src/app/other/other.component.ts

@@ -1,16 +0,0 @@
-import { FontSizeService } from './../font-size.service';
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-other',
-  templateUrl: './other.component.html',
-  styleUrls: ['./other.component.css']
-})
-export class OtherComponent implements OnInit {
-
-  constructor(public fontSizeService:FontSizeService) { }
-
-  ngOnInit(): void {
-  }
-
-}