Injection Token

建立InjectionToken型別變數來產生token

src/app/app.component.html

@@ -1 +1,14 @@
-Loading 圖示位置：{{ loadingPath }}
+<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,10 +1,24 @@
-import { Component, Inject } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
+
+import { OrderDetail } from './order-detail';
+import { IOrderService, ORDER_SERVICE } from './order.interface';
 
 @Component({
   selector: 'my-app',
   templateUrl: './app.component.html',
-  styleUrls: [ './app.component.css' ]
+  styleUrls: ['./app.component.css'],
 })
-export class AppComponent  {
-  constructor(@Inject('LoadingPath') public loadingPath: string) {}
+export class AppComponent implements OnInit {
+  total = 0;
+
+  //@Inject 注入Service(ORDER_SERVICE) Token
+  constructor(@Inject(ORDER_SERVICE) public orderService: IOrderService) {}
+
+  ngOnInit(): void {
+    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,11 +3,13 @@ import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
+import { ORDER_SERVICE } from './order.interface';
+import { OrderService } from './order.service';
 
 @NgModule({
-  imports:      [ BrowserModule, FormsModule ],
-  declarations: [ AppComponent ],
-  providers: [{ provide: 'LoadingPath', useValue: 'assets/loading.gif'}],
-  bootstrap:    [ AppComponent ]
+  imports: [BrowserModule, FormsModule],
+  declarations: [AppComponent],
+  providers: [{ provide: ORDER_SERVICE, useClass: OrderService }],
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

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.interface.ts

@@ -0,0 +1,8 @@
+import { InjectionToken } from "@angular/core";
+import { OrderDetail } from "./order-detail";
+export const ORDER_SERVICE = new InjectionToken<IOrderService>('Order Service');
+
+export interface IOrderService {
+  details: OrderDetail[];
+  computeTotal():number;
+}

src/app/order.service.ts

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