Service 單獨在個別個別component使用

provider可以使用範圍，在component中使用useValue，可以將可以將service限制在指定module中

src/app/app.component.html

@@ -1,14 +1,4 @@
-<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>
+<hr>
+<app-custom></app-custom>
+<h3>AppComponent</h3>
+<span>{{ messageService.message }}</span>

src/app/app.component.ts

@@ -1,23 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
-import { OrderDetail } from './order-detail';
-import { OrderService } from './order.service';
+import { MessageService } from './message.service';
 
 @Component({
   selector: 'my-app',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
+  styleUrls: [ './app.component.css' ]
 })
-export class AppComponent implements OnInit {
-  total = 0;
-
-  constructor(public orderService: OrderService) {}
-
-  ngOnInit(): void {
-    this.orderService.details = [
-      new OrderDetail({ PurchaseCount: 2, UnitPrice: 200 }),
-      new OrderDetail({ PurchaseCount: 4, UnitPrice: 50 }),
-    ];
-    this.total = this.orderService.computeTotal();
-  }
+export class AppComponent  {
+  constructor(public messageService: MessageService) {}
 }

src/app/app.module.ts

@@ -3,25 +3,11 @@ import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
-import { OrderService } from './order.service';
-import { OrderAnniversaryService } from './order-anniversary.service';
+import { CustomComponent } from './custom/custom.component';
 
 @NgModule({
-  imports: [BrowserModule, FormsModule],
-  declarations: [AppComponent],
-  providers: [
-    {
-      provide: OrderService,
-      useFactory: () => {
-        const today = new Date(2020, 9, 3);
-        if (today.getMonth() === 9) {
-          return new OrderAnniversaryService();
-        } else {
-          return new OrderService();
-        }
-      },
-    },
-  ],
-  bootstrap: [AppComponent],
+  imports:      [ BrowserModule, FormsModule ],
+  declarations: [ AppComponent, CustomComponent ],
+  bootstrap:    [ AppComponent ]
 })
-export class AppModule {}
+export class AppModule { }

src/app/custom/custom.component.html

@@ -0,0 +1,2 @@
+<h3>CustomComponent</h3>
+<span>{{ messageService.message }}</span>

src/app/custom/custom.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+
+import { MessageService } from '../message.service';
+
+@Component({
+  selector: 'app-custom',
+  templateUrl: './custom.component.html',
+  styleUrls: ['./custom.component.css'],
+  providers: [
+    {
+      provide: MessageService,
+      useValue: { message: '這是已經被替換掉的訊息' },
+    },
+  ],
+})
+export class CustomComponent implements OnInit {
+  constructor(public messageService: MessageService) {}
+
+  ngOnInit() {}
+}

src/app/message.service.ts

@@ -0,0 +1,11 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MessageService {
+  message = '這是 MessageService 內的訊息'
+
+  constructor() { }
+
+}

src/app/order-anniversary.service.ts

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

src/app/order-detail.ts

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

src/app/order-discount.service.ts

@@ -1,17 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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);
-  }
-}