[Doc] 投影片完整版更新，第一版

package-lock.json

@@ -16,6 +16,8 @@
         "@angular/platform-browser": "^14.2.0",
         "@angular/platform-browser-dynamic": "^14.2.0",
         "@angular/router": "^14.2.0",
+        "ag-grid-angular": "^28.2.1",
+        "ag-grid-community": "^28.2.1",
         "rxjs": "~7.5.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.11.4"
@@ -3282,6 +3284,24 @@
         "node": ">=8.9.0"
       }
     },
+    "node_modules/ag-grid-angular": {
+      "version": "28.2.1",
+      "resolved": "https://registry.npmjs.org/ag-grid-angular/-/ag-grid-angular-28.2.1.tgz",
+      "integrity": "sha512-aYJvmrjwDFm2qy6viM9E8WQ0rCLn3nzuTH5gGIDFjqjFExan8csoNmVKGGbuf9jx8VQm4XQHKWbIzd2eT94kvw==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">= 12.0.0",
+        "@angular/core": ">= 12.0.0",
+        "ag-grid-community": "~28.2.1"
+      }
+    },
+    "node_modules/ag-grid-community": {
+      "version": "28.2.1",
+      "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-28.2.1.tgz",
+      "integrity": "sha512-DMZh/xD/FqYP17qJ1M92PolTYe+hrKuEaf+A4h13O6qn2x/xZQrTRGW5DgnQLR/uLMe1XXZQPKR3UKgAlKo69A=="
+    },
     "node_modules/agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -14114,6 +14134,19 @@
         }
       }
     },
+    "ag-grid-angular": {
+      "version": "28.2.1",
+      "resolved": "https://registry.npmjs.org/ag-grid-angular/-/ag-grid-angular-28.2.1.tgz",
+      "integrity": "sha512-aYJvmrjwDFm2qy6viM9E8WQ0rCLn3nzuTH5gGIDFjqjFExan8csoNmVKGGbuf9jx8VQm4XQHKWbIzd2eT94kvw==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
+    "ag-grid-community": {
+      "version": "28.2.1",
+      "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-28.2.1.tgz",
+      "integrity": "sha512-DMZh/xD/FqYP17qJ1M92PolTYe+hrKuEaf+A4h13O6qn2x/xZQrTRGW5DgnQLR/uLMe1XXZQPKR3UKgAlKo69A=="
+    },
     "agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",

package.json

@@ -18,6 +18,8 @@
     "@angular/platform-browser": "^14.2.0",
     "@angular/platform-browser-dynamic": "^14.2.0",
     "@angular/router": "^14.2.0",
+    "ag-grid-angular": "^28.2.1",
+    "ag-grid-community": "^28.2.1",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

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