使用service注入功能

task.service的gettasks，注入app.component.ts constructor

src/app/app.component.html

@@ -1 +1 @@
-<app-task *ngFor="let task of tasks | orderBy: 'State'" [task]="task"></app-task>
+<pre>{{ tasks | json }}</pre>

src/app/app.component.ts

@@ -1,17 +1,19 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 import { Task } from './task';
+import { TaskService } from './task.service';
 
 @Component({
   selector: 'my-app',
   templateUrl: './app.component.html',
-  styleUrls: [ './app.component.css' ]
+  styleUrls: ['./app.component.css'],
 })
-export class AppComponent  {
-  tasks: Task[] = [
-    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' }),
-  ];
+export class AppComponent implements OnInit {
+  tasks!: Task[];
+
+  constructor(private taskService: TaskService) {}
+
+  ngOnInit(): void {
+    this.tasks = this.taskService.getTasks();
+  }
 }

src/app/app.module.ts

@@ -3,12 +3,10 @@ import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
-import { TaskComponent } from './task/task.component';
-import { OrderByPipe } from './order-by.pipe';
 
 @NgModule({
   imports:      [ BrowserModule, FormsModule ],
-  declarations: [ AppComponent, TaskComponent, OrderByPipe ],
+  declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
 })
 export class AppModule { }

src/app/order-by.pipe.ts

@@ -1,14 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-  name: 'orderBy'
-})
-export class OrderByPipe implements PipeTransform {
-
-  transform(list: any[], prop: string): any[] {
-    return list.sort((a, b) => a[prop] >b[prop]
-    ?1
-    :a[prop]=== b[prop] ?0: -1)
-  }
-
-}

src/app/task.service.ts

@@ -0,0 +1,19 @@
+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/task.component.css

@@ -1,14 +0,0 @@
-:host {
-  display: flex;
-  justify-content: space-between;
-  margin: 10px 20px;
-  padding-left: 5px;
-  padding-right: 10px;
-  border: solid 1px #aaa;
-  line-height: 32pt;
-}
-
-:host(.odd) {
-  background-color: #777;
-  color: white;
-}

src/app/task/task.component.html

@@ -1,6 +0,0 @@
-<span>{{ task.TaskName }}</span>
-<ng-container [ngSwitch]="task.State">
-  <span *ngSwitchCase="'Doing'">進行中</span>
-  <span *ngSwitchCase="'Finish'">已完成</span>
-  <span *ngSwitchDefault>未安排</span>
-</ng-container>

src/app/task/task.component.ts

@@ -1,12 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-import { Task } from '../task';
-
-@Component({
-  selector: 'app-task',
-  templateUrl: './task.component.html',
-  styleUrls: ['./task.component.css']
-})
-export class TaskComponent {
-  @Input() task!: Task;
-}