การใช้งาน Route Guard กับการยกเลิกการเปลี่ยนแปลง ใน Angular ตอนที่ 9

C:\projects\simplerouter>ng g service dialog

import { Injectable } from '@angular/core';
import 'rxjs/add/observable/of';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class DialogService {

  constructor() { }
  
  // สร้างฟังก์ชั่นทำคำสั่งแจ้ง confirm โดยรับค่า message เพื่อระบุข้อความที่ต้องการแจ้ง
  confirm(message?: string): Observable<boolean> {
    const confirmation = window.confirm(message || 'Is it OK?');
    return Observable.of(confirmation);
  };  

}

C:\projects\simplerouter>ng g service can-detactivate-guard

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable }    from 'rxjs/Observable';

// สร้าง interface เพื่อกำหนด CanDeactivate ให้รองรับข้อมูลแบบ Observable
export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

@Injectable()
export class CanDetactivateGuardService implements CanDeactivate<CanComponentDeactivate> {

  constructor() { }

  canDeactivate(component: CanComponentDeactivate) {
    // ถ้า route path ใน component มีการใช้งาน canDeactivate ให้เช็คว่า
    // component นั้นมีคำสั่ง canDeactivate หรือไม่ ก็มีให้คืนค่าการทำคำสั่ง canDeactivate()
    // กรณีอื่นๆ ให้คืนค่า true
    return component.canDeactivate ? component.canDeactivate() : true;
  }  

}

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
 
import { HomeComponent } from './home/home.component';
import { PagenofoundComponent } from './pagenofound/pagenofound.component';
import { ContactComponent } from './contact/contact.component';

import { CanDetactivateGuardService } from './can-detactivate-guard.service';
 
const appRoutes: Routes = [
  {
    path: 'contact',
    component: ContactComponent,
    outlet: 'popup'
  },  
  { path: 'home', component: HomeComponent },
  { path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  { path: '**', component: PagenofoundComponent }
];
 
@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: false } // <-- debugging purposes only set true
    )
  ], 
  exports: [
    RouterModule
  ],
  providers:[
    CanDetactivateGuardService
  ]
})
export class AppRoutingModule { }

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { LoginComponent } from './login.component';
import { AuthService } from '../auth.service';

import { CanDetactivateGuardService } from '../can-detactivate-guard.service';

// กำหนด route path ให้กับ login component
const loginRoutes: Routes = [
  {
    path:'login',
    component:LoginComponent,
    canDeactivate: [CanDetactivateGuardService],
  }
];

@NgModule({
  imports: [RouterModule.forChild(loginRoutes)],
  exports: [RouterModule],
  providers:[ // กำนหด providers
    AuthService // เนื่งอจากเราจะมีการใช้งาน AuthService 
  ]
})
export class LoginRoutingModule { }

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { Observable } from 'rxjs/Observable';

// import AuthService สำหรับตรวจสอบสถานะการล็อกอินมาใช้งาน
import { AuthService } from '../auth.service';
import { DialogService } from '../dialog.service';

@Component({
  //selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  public loginMessage:string; // กำหนดตัวแปรสำหรับเก็บข้อความบอกสถานะการทำงาน

  // injext AuthService และ Router มาใช้งาน
  constructor(
    private authService:AuthService,
    private router:Router,
    private dialog:DialogService ) { }

  // ฟังก์ชั่นนี้ เป้นคนละตัวกับคำสั่ง login() ใน AuthService ตัวนีจะทำงานเมื่อผู้ใช้คลิกที่ปุ่ม submit
  // เป็นฟังก์ชั่นที่ทำงานในหน้าล็อกอิน เมื่อสมมติผู้ใช้กรอกช้อมูลเรียบร้อยแล้ว และกดปุ่มล็อกอิน
  login(){
    
    // แสดงข้อความผ่านตัวแปร dddd ว่ากำลังพยายามล็อกอิน เนื่องจากเราใช้วิธีการ delay สถานะการล็อกอิน
    // ในไฟล์ auth.service.ts ข้อความนี้จึงแสดงอยู่ภายใน 3 วินาที
    this.loginMessage = 'Trying to log in ...';
    
    // เนื่องจากค่า true ที่เรา delay เป็น Observable เราต้องทำการ subscribe 
    // รอค่าที่ Observable จะส่งออกมา
    this.authService.login().subscribe(() => {
      
      // เมื่อมีการส่งค่ากลับมา และเป็น true แสดงว่ามีการล็ฮกอินแล้ว
      if (this.authService.isLoggedIn) {
        
        // ดึงค่า url ที่พยายามเข้าใช้งานก่อนล็อกอิน มากำหนดหน้าที่จะลิ้งค์ไป
        // ถ้าไม่มีค่ากำหนดเป็นค่าหน้าหลักที่ต้องการ ในที่นี้กำหนดว่า ถ้าไม่มีค่าให้ไปที่ /admin
        let redirect = this.authService.redirectUrl ? this.authService.redirectUrl : '/admin';

        // ลิ้งค์ไปยังหน้าที่กำหนด
        this.router.navigate([redirect]);
      }   
    }); 
  }

  // สร้างฟังก์ช่ัน canDeactivate คืนค่าเป็น Observable 
  canDeactivate(): Observable<boolean> | boolean {
    // ถามผู้ใช้ผ่าน dialog service และคืนค่า true หรือ false 
    // จากการตัดสินใจของผู้ใช้งาน
    return this.dialog.confirm('ยกเลิกการเปลี่ยนแปลง แล้วออกจากหน้านี้?');
  }

  // ฟังก์ชั่นนี้สร้างให้กับปุ่ม cancel แต่ในที่นี้ไม่ได้ทำอะไรพิเศษ
  cancel(){
    console.log('Cancel');
  }

  ngOnInit() {

  }

}

// กำหนด route path ให้กับ login component
const loginRoutes: Routes = [
  {
    path:'login',
    component:LoginComponent,
    canDeactivate: [CanDetactivateGuardService],
  }
];

// สร้าง interface เพื่อกำหนด CanDeactivate ให้รองรับข้อมูลแบบ Observable
export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

@Injectable()
export class CanDetactivateGuardService implements CanDeactivate<CanComponentDeactivate> {

  constructor() { }

  canDeactivate(component: CanComponentDeactivate) {
    // ถ้า route path ใน component มีการใช้งาน canDeactivate ให้เช็คว่า
    // component นั้นมีคำสั่ง canDeactivate หรือไม่ ก็มีให้คืนค่าการทำคำสั่ง canDeactivate()
    // กรณีอื่นๆ ให้คืนค่า true
    return component.canDeactivate ? component.canDeactivate() : true;
  }  

}

@Injectable()
export class CanDetactivateGuardService {
// implements CanDeactivate<CanComponentDeactivate>
  constructor() { }

  canDeactivate(component): Observable<boolean> | Promise<boolean> | boolean {
    // ถ้า route path ใน component มีการใช้งาน canDeactivate ให้เช็คว่า
    // component นั้นมีคำสั่ง canDeactivate หรือไม่ ก็มีให้คืนค่าการทำคำสั่ง canDeactivate()
    // กรณีอื่นๆ ให้คืนค่า true
    return component.canDeactivate ? component.canDeactivate() : true;
  }  

}

  // สร้างฟังก์ช่ัน canDeactivate คืนค่าเป็น Observable 
  canDeactivate(): Observable<boolean> | boolean {
    // ถามผู้ใช้ผ่าน dialog service และคืนค่า true หรือ false 
    // จากการตัดสินใจของผู้ใช้งาน
    return this.dialog.confirm('ยกเลิกการเปลี่ยนแปลง แล้วออกจากหน้านี้?');
  }