檢查是否可以離開頁面canDeactivate

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

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

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