Service Interaction ，Service 水平互動

APP.component初始化Service Value
font-size 使用畫面改變Value
other則顯示出則顯示出Value值

src/app/app.component.html

@@ -1 +1,2 @@
-<pre>{{ tasks | json }}</pre>
+<app-font-size></app-font-size>
+<app-other></app-other>

src/app/app.component.ts

@@ -1,7 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { FontSizeService } from './font-size.service';
 
-import { Task } from './task';
-import { TaskService } from './task.service';
 
 @Component({
   selector: 'my-app',
@@ -9,11 +8,9 @@ import { TaskService } from './task.service';
   styleUrls: ['./app.component.css'],
 })
 export class AppComponent implements OnInit {
-  tasks!: Task[];
-
-  constructor(private taskService: TaskService) {}
+  constructor(public fontSizeService: FontSizeService) {}
 
   ngOnInit(): void {
-    this.tasks = this.taskService.getTasks();
+    this.fontSizeService.size = 10;
   }
 }

src/app/app.module.ts

@@ -3,10 +3,12 @@ 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';
 
 @NgModule({
   imports:      [ BrowserModule, FormsModule ],
-  declarations: [ AppComponent ],
+  declarations: [ AppComponent, OtherComponent, FontSizeComponent ],
   bootstrap:    [ AppComponent ]
 })
 export class AppModule { }

src/app/font-size.service.ts

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

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

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

@@ -0,0 +1,17 @@
+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/other/other.component.html

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

src/app/other/other.component.ts

@@ -0,0 +1,16 @@
+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 {
+  }
+
+}

src/app/task.service.ts

@@ -1,19 +0,0 @@
-import { Injectable } from '@angular/core';
-
-import { Task } from './task';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class TaskService {
-  constructor() {}
-
-  getTasks(): Task[] {
-    return [
-      new Task({ TaskSn: '001', TaskName: '待辦事項 A', State: 'Finish' }),
-      new Task({ TaskSn: '002', TaskName: '待辦事項 B', State: 'Doing' }),
-      new Task({ TaskSn: '003', TaskName: '待辦事項 C', State: 'None' }),
-      new Task({ TaskSn: '004', TaskName: '待辦事項 D', State: 'None' }),
-    ];
-  }
-}

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;
-}