การดึงข้อมูลโดยใช้ Resolve ของ Route Guard ใน Angular ตอนที่ 10

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { Observable } from 'rxjs/Observable';
 
import { User } from './user';
 
import { UserService } from './user.service';
 
@Component({
  //selector: 'app-user-detail',
  templateUrl: './user-detail.component.html',
  styleUrls: ['./user-detail.component.css']
})
export class UserDetailComponent implements OnInit {
 
  public user:User; // เดิมใช้เป็นแบบ array - public users:User[];
  private id:number|string;
    
  constructor(
    private userService:UserService,
    private route: ActivatedRoute,
    private router: Router        
  ) { }
  
  ngOnInit() {     
    this.route.data
    .subscribe((data: { user: User }) => {
      this.id = data.user.id;
      this.user = data.user;
    });
  }
  
  gotoUsers() {
    this.router.navigate(['/users']);
  }  
  
  gotoUsers2(){
    this.router.navigate(['/users',{id:this.id,more:'test'}]);
  }
 
}

  ngOnInit() {     
    this.route.data
    .subscribe((data: { user: User }) => {
      this.id = data.user.id;
      this.user = data.user;
    });
  }

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/take';
import { Injectable }             from '@angular/core';
import { Observable }             from 'rxjs/Observable';
import { Router, Resolve, RouterStateSnapshot,
         ActivatedRouteSnapshot } from '@angular/router';
 
import { User } from './user';         
import { UserService }  from './user.service';         
 
@Injectable()
export class UserDetailResolverService {
 
  constructor(
    private userService: UserService, 
    private router: Router
  ) {}
   
    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<User> {
      let id = route.paramMap.get('id');
   
      return this.userService.getUser(id).take(1).map(users => {
        if (users) {
          return users;
        } else { // id not found
          this.router.navigate(['/users']);
          return null;
        }
      });
    }
 
}

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
 
import { UserCenterComponent } from './user-center.component';
import { UserListComponent } from './user-list.component';
import { UserDetailComponent } from './user-detail.component';
import { UserDetailResolverService } from './user-detail-resolver.service';
 
const userRoutes: Routes = [
  {
    path:'users',
    component:UserCenterComponent,
    children:[
      {
        path: '',
        component: UserListComponent,
        children:[
          {
            path:':id',
            component:UserDetailComponent,
            resolve: {
              user: UserDetailResolverService
            }            
          }
        ] // end children
      }
    ] // end children
  }
];
 
@NgModule({
  imports: [RouterModule.forChild(userRoutes)],
  providers: [
    UserDetailResolverService
  ],  
  exports: [RouterModule]
})
export class UserRoutingModule { }

        http://localhost:4200/users/1
        http://localhost:4200/users;id=1;more=test

import { Injectable } from '@angular/core';
// import ส่วนที่จะใช้งาน guard เช่น CanActivate, CanActivateChild เป็นต้นมาใช้งาน
import {
  CanActivate, Router,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
  NavigationExtras,
  CanActivateChild
} from '@angular/router';
// import service ที่เช็คสถานะการล็อกอินมาใช้งาน
import { AuthService } from './auth.service';

@Injectable()
export class AuthGuardService {

  // inject AuthService และ Router 
  constructor(
    private authService: AuthService, 
    private router: Router) {}
  
  // กำนหนด guard ในส่วนของการใช้งานกับ  canActivate
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    console.log('canActivate run');
    let url: string = state.url; // เก็บ url ที่พยายามจะเข้าใช้งาน
    // จะผ่านเข้าใช้งานได้เมื่อ คืนค่าเป็น true โดยเข้าไปเช็คค่าจากคำสั่ง checkLogin()
    return this.checkLogin(url); // คืนค่าการตรวจสอบสถานะการล็อกอิน
  }

  // กำนหนด guard ในส่วนของการใช้งานกับ  canActivateChild ส่วนนี้จะใช้กับ path ของ route ย่อย
  // ถ้าเข้าผ่าน route path ย่อย guard จะเข้ามาเช็คในส่วนนี้ก่อน กลับไปเช็คในส่วนของ canActivate()
  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    console.log('canActivateChild run');
    // จะเข้าใช้งานได้เมื่อ คืนค่าเป็น true โดยจะใช้ค่าจากการเรียกใช้คำสั่ง canActivate()
    return this.canActivate(route, state);
  }

  // ฟังก์ชั่นเช็คสถานะการล็อกอิน รับค่า url ที่ผู้ใช้พยายามจะเข้าใช้งาน
  checkLogin(url: string): boolean {
    // ถ้าตรวจสอบค่าสถานะการล็อกอินแล้วเป็น true ก็ให้คืนค่า true กลับอกไป
    if (this.authService.isLoggedIn) { return true; }
    
    // แต่ถ้ายังไม่ได้ล็อกอิน ให้เก็บ url ที่พยายามจะเข้าใช้งาน สำหรับไว้ลิ้งค์เปลี่ยนหน้า
    this.authService.redirectUrl = url; // redirectUrl เป็นตัวแปรที่อยู่ใน authService

    // จำลองค่า session id
    let sessionId = 123456789;

    // กำหนด ค่าเพิ่มเติมให้กับ NavigationExtras ที่จะมีการส่งค่าไปพร้อมกับ url 
    // ประกอบไปด้วย query params และ fragment
    let navigationExtras: NavigationExtras = {
      queryParams: { 'session_id': sessionId },
      fragment: 'anchor'
    };

    // ลิ้งค์ไปยังหน้าล็อกอิน เพื่อล็อกอินเข้าใช้งานก่อน มีการส่งค่า query params
    this.router.navigate(['/login'],navigationExtras);
    return false; // คืนค่า false กรณียังไม่ได้ล็อกอิน
  }    

}

http://localhost:4200/login?session_id=123456789#anchor

    let navigationExtras: NavigationExtras = {
      queryParams: { 'session_id': sessionId }
    };

http://localhost:4200/login?session_id=123456789

    let queryData = {
      data1:1,
      data2:'test'
    };
	
    let navigationExtras: NavigationExtras = {
      queryParams: queryData,
      fragment: 'anchor'
    };

http://localhost:4200/login?data1=1&data2=test#anchor

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, NavigationExtras, 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';

        // การกำหนดค่า แบบให้คงค่าเดิม ทัืง query params และ fragment 
        let navigationExtras: NavigationExtras = {
          queryParamsHandling: 'preserve',
          preserveFragment: true
        };

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

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

  ngOnInit() {

  }

}

http://localhost:4200/admin?session_id=123456789#anchor

<p> admin-center works! </p>
<p>Session ID: {{ sessionId | async }}</p>
<a id="anchor"></a>
<p>Token: {{ token | async }}</p>
<button [routerLink]="['/admin']" 
  routerLinkActive="btn-info" [routerLinkActiveOptions]="{ exact: true }" 
  class="btn btn-sm btn-default" >Home</button>
<button [routerLink]="['/admin/users']" 
  routerLinkActive="btn-info" 
  class="btn btn-sm btn-default" >Manage User</button>
<button [routerLink]="['/admin/products']" 
  routerLinkActive="btn-info" 
  class="btn btn-sm btn-default" >Manage Product</button>
<button class="btn btn-sm btn-danger" (click)="logout()" 
  type="button">Log Out</button>
<router-outlet></router-outlet>

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

import { AuthService } from '../auth.service';

@Component({
  //selector: 'app-admin-center',
  templateUrl: './admin-center.component.html',
  styleUrls: ['./admin-center.component.css']
})
export class AdminCenterComponent implements OnInit {
  // กำหนดตัวแปร สำหรับเก็บค่า qeury params ที่ส่งมา ใช้เป็นแบบ Observable
  public sessionId: Observable<string>;
  public token: Observable<string>;

  constructor(
    private authService:AuthService,
    private route: ActivatedRoute,
    private router:Router) { }

  // คำสั่ง สำหรับเรียกให้ AuthService ทำคำสั่งล็อกเอาท์อีกที
  logout() {
    this.authService.logout();
    this.router.navigate(['/login']); // หลังจากล็อกอาท์ให้ไปที่หน้าล็อกอิน
  }

  ngOnInit() {
    // เก็บค่า  session ID ถ้ามี ถ้าไม่มีให้ขึ้นคำว่า None
    this.sessionId = this.route
    .queryParamMap
    .map(params => params.get('session_id') || 'None');

  // เก็บค่า fragment ถ้ามี ถ้าไม่มีให้ขึ้นคำว่า None
    this.token = this.route
    .fragment
    .map(fragment => fragment || 'None');
       
  }

}