From 12fb25d8fb46bf23877e1466b25cd8612092f9a7 Mon Sep 17 00:00:00 2001
From: HarveyChou <harveychou@origtek-com.tw>
Date: Thu, 10 Nov 2022 13:46:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=AA=A2=E6=9F=A5=E6=98=AF=E5=90=A6=E5=8F=AF?=
 =?UTF-8?q?=E4=BB=A5=E9=9B=A2=E9=96=8B=E9=A0=81=E9=9D=A2canDeactivate?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/app.component.css                     | 27 -------------------
 .../task-feature-routing.module.ts            |  9 +++++--
 src/app/task-feature/task-form.guard.ts       | 25 +++++++++++++++++
 3 files changed, 32 insertions(+), 29 deletions(-)
 create mode 100644 src/app/task-feature/task-form.guard.ts

diff --git a/src/app/app.component.css b/src/app/app.component.css
index 3b13dfd..ba43f51 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -1,30 +1,3 @@
 p {
   font-family: Lato;
 }
-
-nav {
-  padding: 10px 0;
-}
-
-nav a {
-  margin-right: 10px;
-  border: solid 1px #999;
-  display: inline-block;
-  font-size: 12pt;
-  padding: 10px;
-  min-width: 80px;
-  text-align: center;
-}
-
-nav a:link,
-nav a:visited,
-nav a:hover,
-nav a:active {
-  color: black;
-  text-decoration: none;
-}
-
-nav a.active {
-  background-color: black;
-  color: white;
-}
diff --git a/src/app/task-feature/task-feature-routing.module.ts b/src/app/task-feature/task-feature-routing.module.ts
index 1e1a9b5..cc52752 100644
--- a/src/app/task-feature/task-feature-routing.module.ts
+++ b/src/app/task-feature/task-feature-routing.module.ts
@@ -2,15 +2,20 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 import { TaskFormPageComponent } from './task-form-page/task-form-page.component';
+import { TaskFormGuard } from './task-form.guard';
 import { TaskPageComponent } from './task-page/task-page.component';
 import { TaskResolver } from './task.resolver';
 
 const routes: Routes = [
   { path: 'list', component: TaskPageComponent },
-  { path: 'form', component: TaskFormPageComponent },
+  {
+    path: 'form', component: TaskFormPageComponent,
+    canDeactivate:[TaskFormGuard],
+  },
   {
     path: 'form/:sn',
     component: TaskFormPageComponent,
+    canDeactivate:[TaskFormGuard],
     resolve: {
       task: TaskResolver,
     },
@@ -21,4 +26,4 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
 })
-export class TaskRoutingModule {}
+export class TaskRoutingModule { }
diff --git a/src/app/task-feature/task-form.guard.ts b/src/app/task-feature/task-form.guard.ts
new file mode 100644
index 0000000..8ab46b3
--- /dev/null
+++ b/src/app/task-feature/task-form.guard.ts
@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, CanDeactivate, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { Observable } from 'rxjs';
+import { TaskFormPageComponent } from './task-form-page/task-form-page.component';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TaskFormGuard implements CanDeactivate<TaskFormPageComponent> {
+  canDeactivate(
+    component: TaskFormPageComponent,
+    currentRoute: ActivatedRouteSnapshot,
+    currentState: RouterStateSnapshot,
+    nextState?: RouterStateSnapshot ):
+  | boolean
+  | UrlTree
+  | Observable<boolean | UrlTree>
+  | Promise<boolean | UrlTree> {
+    if(component.formControl.dirty){
+      return confirm('你已編輯表單，確定要離開頁面?');
+    }else{
+      return true;
+    }
+  }
+}