Async Timer使用，實作subscribe跟unsubscribe

如果未取消unsubscribe，則會造成重複執行，降低效能

src/app/app.component.html

@@ -1,11 +1,3 @@
-<ng-container *ngIf="tasks$ | async as tasks; else empty">
-  <app-task
-    *ngFor="let task of tasks; let odd = odd"
-    [class.odd]="odd"
-    [task]="task"
-  ></app-task>
-</ng-container>
-
-<ng-template #empty>
-  <div class="data-empty">無待辦事項</div>
-</ng-template>
+<button [disabled]="display" (click)="display = true">開啟計時</button>
+<button [disabled]="!display" (click)="display = false">關閉計時</button>
+<app-timer *ngIf="display"></app-timer>

src/app/app.component.ts

@@ -1,20 +1,11 @@
 import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
-import { TaskService } from './task.service';
-
-import { Task } from './task';
 
 @Component({
   selector: 'my-app',
   templateUrl: './app.component.html',
   styleUrls: [ './app.component.css' ]
 })
-export class AppComponent implements OnInit {
-  tasks$!: Observable<Task[]>;
-
-  constructor(private taskService: TaskService) {}
-
-  ngOnInit(): void {
-    this.tasks$ = this.taskService.getList();
-  }
+export class AppComponent  {
+  display=false;
 }

src/app/app.module.ts

@@ -3,11 +3,11 @@ import { BrowserModule } from '@angular/platform-browser';
 import { HttpClientModule } from '@angular/common/http';
 
 import { AppComponent } from './app.component';
-import { TaskComponent } from './task/task.component';
+import { TimerComponent } from './timer/timer.component';
 
 @NgModule({
   imports:      [ BrowserModule, HttpClientModule ],
-  declarations: [ AppComponent, TaskComponent ],
+  declarations: [ AppComponent, TimerComponent ],
   bootstrap:    [ AppComponent ]
 })
 export class AppModule { }

src/app/task.service.ts

@@ -1,16 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { Observable, tap } from 'rxjs';
-
-import { Task } from './task';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class TaskService {
-  constructor(private httpClient: HttpClient) {}
-
-  getList(): Observable<Task[]> {
-    return this.httpClient.get<Task[]>('assets/tasks.json');
-  }
-}

src/app/task.ts

@@ -1,8 +0,0 @@
-export class Task {
-  constructor(initData?: Partial<Task>){
-    Object.assign(this,initData);
-  }
-
-  TaskSn!: string;
-  TaskName!: string;
-}

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 +0,0 @@
-<span>{{ task.TaskName }}</span>

src/app/task/task.component.ts

@@ -1,14 +0,0 @@
-import { Component, Input, OnInit } 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;
-
-
-}

src/app/timer/timer.component.html

@@ -0,0 +1 @@
+Time:{{time}}

src/app/timer/timer.component.ts

@@ -0,0 +1,25 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import {interval, Subscription} from 'rxjs';
+@Component({
+  selector: 'app-timer',
+  templateUrl: './timer.component.html',
+  styleUrls: ['./timer.component.css']
+})
+export class TimerComponent implements OnInit, OnDestroy {
+  time=0;
+  subscription!: Subscription;
+  constructor() { }
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+
+  ngOnInit(): void {
+    this.subscription=interval(1000).subscribe({
+      next:(time)=>{
+        console.log(time);
+        this.time=time;
+      }
+    });
+  }
+
+}

src/assets/tasks.json

@@ -1,6 +0,0 @@
-[
-  { "TaskSn": "001", "TaskName": "待辦事項 A" },
-  { "TaskSn": "002", "TaskName": "待辦事項 B" },
-  { "TaskSn": "003", "TaskName": "待辦事項 C" },
-  { "TaskSn": "004", "TaskName": "待辦事項 D" }
-]