diff --git a/src/app/app.component.html b/src/app/app.component.html
index 1190abe..876e0e5 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -5,7 +5,10 @@
[routerLinkActiveOptions]="{ exact: true }"
>首頁
- 工作事項
+ 工作事項
diff --git a/src/app/task-form-page/task-form-page.component.html b/src/app/task-form-page/task-form-page.component.html
index 0c8491d..ed10e9c 100644
--- a/src/app/task-form-page/task-form-page.component.html
+++ b/src/app/task-form-page/task-form-page.component.html
@@ -3,5 +3,4 @@
工作事項:
-
diff --git a/src/app/task-form-page/task-form-page.component.ts b/src/app/task-form-page/task-form-page.component.ts
index 988c0c1..e9213e0 100644
--- a/src/app/task-form-page/task-form-page.component.ts
+++ b/src/app/task-form-page/task-form-page.component.ts
@@ -16,7 +16,7 @@ export class TaskFormPageComponent implements OnInit, OnDestroy {
readonly formControl = new FormControl();
- // private readonly stop$ = new Subject();
+ private readonly stop$ = new Subject();
constructor(
private router: Router,
@@ -24,35 +24,28 @@ export class TaskFormPageComponent implements OnInit, OnDestroy {
private taskService: TaskService
) {}
- // 書本勘誤 p.9-12
- // 錯誤內容:路由參數的訂閱需要手動去取消,否則會在每次頁面元件載入時都會建立一個訂閱。
- // 正確內容:當元件裡有注入 ActivatedRoute,在 Router 建立元件時會一併建立 ActivatedRoute 實體,
- // 而此元件被銷毀的同時,被注入至元件的 ActivatedRoute 實體也會一併被銷毀,因此不需要手動取消訂閱
ngOnInit(): void {
this.route.paramMap
.pipe(
map((paramMap) => paramMap.get('sn')),
- switchMap((taskSn) => this.taskService.get(taskSn?taskSn:'')),
- tap((task) => (this.task = task))
- // takeUntil(this.stop$)
+ switchMap((taskSn) => this.taskService.get(taskSn??'')),
+ tap((task) => (this.task = task)),
+ takeUntil(this.stop$)
)
- .subscribe({
- next: (task) => this.formControl.setValue(task.TaskName),
- });
+ .subscribe((task) => this.formControl.setValue(task.TaskName),
+ );
}
ngOnDestroy(): void {
- // this.stop$.next();
- // this.stop$.complete();
+ this.stop$.next();
+ this.stop$.complete();
}
- onNext(): void {
- const sn = this.taskService.getNextSn(this.task.TaskSn);
- // this.router.navigate(['task', 'form', sn]);
- this.router.navigate([`../${sn}`], { relativeTo: this.route });
- }
+
onCancel(): void {
- this.router.navigateByUrl('tasks');
+ this.router.navigate(['task', 'list'], {
+ queryParamsHandling: 'preserve',
+ });
}
}
diff --git a/src/app/task-page/task-page.component.html b/src/app/task-page/task-page.component.html
index 948122e..0fba1ba 100644
--- a/src/app/task-page/task-page.component.html
+++ b/src/app/task-page/task-page.component.html
@@ -9,6 +9,10 @@
[task]="task"
(edit)="onEdit($event)"
>
+
diff --git a/src/app/task-page/task-page.component.ts b/src/app/task-page/task-page.component.ts
index 8b39493..14ce4fd 100644
--- a/src/app/task-page/task-page.component.ts
+++ b/src/app/task-page/task-page.component.ts
@@ -1,6 +1,7 @@
-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import { Observable } from 'rxjs';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Observable, Subject } from 'rxjs';
+import { map, switchMap, takeUntil, tap } from 'rxjs/operators';
import { Task } from '../task';
import { TaskService } from '../task.service';
@@ -12,10 +13,35 @@ import { TaskService } from '../task.service';
export class TaskPageComponent implements OnInit {
tasks$!: Observable;
- constructor(private router: Router, private taskService: TaskService) {}
+ pageIndex!: number;
+ pageSize!: number;
+ constructor(
+ private router: Router,
+ private route: ActivatedRoute,
+ private taskService: TaskService
+ ) {}
+
+ // 書本勘誤 p.9-12
+ // 錯誤內容:路由參數的訂閱需要手動去取消,否則會在每次頁面元件載入時都會建立一個訂閱。
+ // 正確內容:當元件裡有注入 ActivatedRoute,在 Router 建立元件時會一併建立 ActivatedRoute 實體,
+ // 而此元件被銷毀的同時,被注入至元件的 ActivatedRoute 實體也會一併被銷毀,因此不需要手動取消訂閱
ngOnInit(): void {
- this.tasks$ = this.taskService.getList();
+ // const pageIndex = +this.route.snapshot.queryParamMap.get('pageIdx') || 1;
+ // const pageSize = +this.route.snapshot.queryParamMap.get('pageSize') || 5;
+ // this.tasks$ = this.taskService.getList(pageIndex, pageSize);
+
+ this.tasks$ = this.route.queryParamMap.pipe(
+ map((queryParamMap) => ({
+ index: +(queryParamMap.get('pageIdx') ?? 0),
+ size: +(queryParamMap.get('pageSize') || 5),
+ })),
+ tap(({ index, size }) => {
+ this.pageIndex = index;
+ this.pageSize = size;
+ }),
+ switchMap(({ index, size }) => this.taskService.getList(index, size))
+ );
}
onAdd(): void {
@@ -23,6 +49,19 @@ export class TaskPageComponent implements OnInit {
}
onEdit(task: Task): void {
- this.router.navigate(['task', 'form', task.TaskSn]);
+ this.router.navigate(['task', 'form', task.TaskSn], {
+ queryParamsHandling: 'preserve',
+ });
+ }
+
+ onNextPage(moveIndex: number): void {
+ this.router.navigate([], {
+ relativeTo: this.route,
+ queryParamsHandling: 'merge',
+ queryParams: {
+ pageIdx: this.pageIndex + moveIndex,
+ //pageSize: this.pageSize,
+ },
+ });
}
}
diff --git a/src/app/task.service.ts b/src/app/task.service.ts
index 646dc88..d9d9598 100644
--- a/src/app/task.service.ts
+++ b/src/app/task.service.ts
@@ -1,7 +1,7 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
+import { map, mergeMap, skip, take, toArray } from 'rxjs/operators';
import { Task } from './task';
@@ -9,25 +9,20 @@ import { Task } from './task';
providedIn: 'root',
})
export class TaskService {
- private _tasks: string[]=[];
-
constructor(private httpClient: HttpClient) {}
get(taskSn: string): Observable {
- return this.getList().pipe(
- map((tasks) => tasks.find((task) => task.TaskSn === taskSn))
- );
- }
-
- getNextSn(currentSn: string): string {
- const index = this._tasks.findIndex((taskSn) => taskSn === currentSn);
- const next = index === this._tasks.length - 1 ? 0 : index + 1;
- return this._tasks[next];
+ return this.httpClient
+ .get('assets/tasks.json')
+ .pipe(map((tasks) => tasks.find((task) => task.TaskSn === taskSn)));
}
- getList(): Observable {
- return this.httpClient
- .get('../assets/tasks.json')
- .pipe(tap((tasks) => (this._tasks = tasks.map((task) => task.TaskSn))));
+ getList(pageIndex = 0, pageSize = 10): Observable {
+ return this.httpClient.get('../assets/tasks.json').pipe(
+ mergeMap((task) => task),
+ skip(pageIndex * pageSize),
+ take(pageSize),
+ toArray()
+ );
}
}
diff --git a/src/assets/tasks.json b/src/assets/tasks.json
index 8cee24f..cff5178 100644
--- a/src/assets/tasks.json
+++ b/src/assets/tasks.json
@@ -2,5 +2,27 @@
{ "TaskSn": "001", "TaskName": "待辦事項 A" },
{ "TaskSn": "002", "TaskName": "待辦事項 B" },
{ "TaskSn": "003", "TaskName": "待辦事項 C" },
- { "TaskSn": "004", "TaskName": "待辦事項 D" }
+ { "TaskSn": "004", "TaskName": "待辦事項 D" },
+ { "TaskSn": "005", "TaskName": "待辦事項 E" },
+ { "TaskSn": "006", "TaskName": "待辦事項 F" },
+ { "TaskSn": "007", "TaskName": "待辦事項 G" },
+ { "TaskSn": "008", "TaskName": "待辦事項 H" },
+ { "TaskSn": "009", "TaskName": "待辦事項 I" },
+ { "TaskSn": "010", "TaskName": "待辦事項 J" },
+ { "TaskSn": "011", "TaskName": "待辦事項 K" },
+ { "TaskSn": "012", "TaskName": "待辦事項 L" },
+ { "TaskSn": "013", "TaskName": "待辦事項 M" },
+ { "TaskSn": "014", "TaskName": "待辦事項 N" },
+ { "TaskSn": "015", "TaskName": "待辦事項 O" },
+ { "TaskSn": "016", "TaskName": "待辦事項 P" },
+ { "TaskSn": "017", "TaskName": "待辦事項 Q" },
+ { "TaskSn": "018", "TaskName": "待辦事項 R" },
+ { "TaskSn": "019", "TaskName": "待辦事項 S" },
+ { "TaskSn": "020", "TaskName": "待辦事項 T" },
+ { "TaskSn": "021", "TaskName": "待辦事項 U" },
+ { "TaskSn": "022", "TaskName": "待辦事項 V" },
+ { "TaskSn": "023", "TaskName": "待辦事項 W" },
+ { "TaskSn": "024", "TaskName": "待辦事項 X" },
+ { "TaskSn": "025", "TaskName": "待辦事項 Y" },
+ { "TaskSn": "026", "TaskName": "待辦事項 Z" }
]