การใช้งานและ การกำหนด parameter ให้กับ Routing ใน Angular ตอนที่ 4

C:\projects\simplerouter>ng g class product/product

export class Product {
    constructor(
        public id:number,
        public name:string,
        public detail:string,
        public price:number,
        public quantity:number
    ){}
}

C:\projects\simplerouter>ng g class product/mock-products

import { Product } from './product';

export var PRODUCTS:Product[] = [
    {
        id:1,
        name:'โคมไฟตั้งโต๊ะ',
        detail:'รายละเอียด โคมไฟตั้งโต๊ะ',
        price:300,
        quantity:20
    },
    {
        id:2,
        name:'ไฟฉายพกพา',
        detail:'รายละเอียด ไฟฉายพกพา',
        price:200,
        quantity:50
    },
    {
        id:3,
        name:'แบตเตอรี่สำรอง',
        detail:'รายละเอียด แบตเตอรี่สำรอง',
        price:600,
        quantity:30
    },        
];

/*
public id:number,
public name:string,
public detail:string,
public price:number,
public quantity:number
*/

C:\projects\simplerouter>ng g service product/product

import { Injectable } from '@angular/core';

import { PRODUCTS } from './mock-products';

@Injectable()
export class ProductService {

  constructor() { }

  getProducts(){
     return PRODUCTS;
  }

  getProduct(id:number|string){
    return PRODUCTS.filter(
      function(product,i){    
        return product.id == id ? product : null;
      }
    );
  }

}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ProductRoutingModule } from './product-routing.module';
import { ProductListComponent } from './product-list.component';
import { ProductDetailComponent } from './product-detail.component';

import { ProductService } from './product.service';

@NgModule({
  imports: [
    CommonModule,
    ProductRoutingModule
  ],
  providers: [
    ProductService
  ],    
  declarations: [ProductListComponent, ProductDetailComponent]
})
export class ProductModule { }

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

import { Product } from './product';

import { ProductService } from './product.service';

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

  public products:Product[];
  private highlightId:number|string;

  constructor(
    private productService: ProductService,
    private route: ActivatedRoute,
    private router: Router        
  ) { }

  ngOnInit() {
    this.products = this.productService.getProducts();
    let params = this.route.snapshot.paramMap;
    if(params.has('id')){
      this.highlightId = params.get('id');
    }
    //console.log(this.products);
    //console.log(this.route);
  }

}

this.router.navigate(['/product/1']);  // กรณีมี parameter ที่จำเป็นต้องมี
// หรือ
this.router.navigate(['/product',id]);  // กรณีมี parameter ที่จำเป็นต้องมี
// หรือ
this.router.navigate(['/products']);  // กรณีไม่มี parameter ใดๆ
// หรือ
this.router.navigate(['/products',{id:id,more:'test'}]); // กรณีมี parameter option มีหรือไม่ก็ได้

http://localhost:4200/product/1
http://localhost:4200/product/1
http://localhost:4200/products
http://localhost:4200/products;id=3;more=test

let params = this.route.snapshot.paramMap;

let params = this.route.snapshot.paramMap;
if(params.has('id')){
  this.highlightId = params.get('id');
}

public products:Product[];
private highlightId:number|string;

constructor(
    private productService: ProductService,
    private route: ActivatedRoute,
    private router: Router        
) { }

ngOnInit() {
    this.products = this.productService.getProducts();
    let params = this.route.snapshot.paramMap;
    if(params.has('id')){
      this.highlightId = params.get('id');
    }
    //console.log(this.products);
    //console.log(this.route);
}

this.products = this.productService.getProducts();

let params = this.route.snapshot.paramMap;
if(params.has('id')){
  this.highlightId = params.get('id');
}

<p> product-list works! </p>
<table class="table">
  <thead>
    <tr class="active">
      <th>#</th>
      <th>Name</th>
      <th>Price</th>
      <th>View</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let product of products; let i=index;" [class.warning]="highlightId == product.id" >
      <td>{{ i+1 }}</td>
      <td>{{ product.name }}</td>
      <td>{{ product.price }}</td>
      <td>
      <button type="button" routerLink="/product/{{ product.id }}"  class="btn btn-sm btn-success">
      View
      </button>
      </td>
    </tr>
  </tbody>
</table>

[class.warning]="highlightId == product.id" 

<button type="button" routerLink="/product/{{ product.id }}"  class="btn btn-sm btn-success">
      View
      </button>

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

import { Product } from './product';

import { ProductService } from './product.service';

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

  public products:Product[];
  private id:number|string;
  
  constructor(
    private productService:ProductService,
    private route: ActivatedRoute,
    private router: Router        
  ) { }

  ngOnInit() {
    let params = this.route.snapshot.paramMap;
    if(params.has('id')){
      this.id = params.get('id');
    }    
    this.products = this.productService.getProduct(this.id);
    // console.log(this.id);
    // console.log(this.products);
    // console.log(this.route);
  }

  gotoProducts() {
    this.router.navigate(['/products']);
  }  

  gotoProducts2(){
    this.router.navigate(['/products',{id:this.id,more:'test'}]);
  }
}

http://localhost:4200/products;id=2;more=test

<p> product-detail works! </p>
<table class="table" *ngFor="let product of products">
  <tr>
    <th class="active text-right" width="120">ID</th>
    <td>{{ product.id }}</td>
  </tr>
  <tr>
    <th class="active text-right" width="120">Name</th>
    <td>{{ product.name }}</td>
  </tr>
  <tr>
    <th class="active text-right" width="120">Detail</th>
    <td>{{ product.detail }}</td>
  </tr>
  <tr>
    <th class="active text-right" width="120">Price</th>
    <td>{{ product.price }}</td>
  </tr>
  <tr>
    <th class="active text-right" width="120">Quantity</th>
    <td>{{ product.quantity }}</td>
  </tr>
</table>
<button class="btn" type="button" routerLink="/products">Back 1</button>
<button class="btn btn-info" type="button" (click)="gotoProducts()">Back 2</button>
<button class="btn btn-warning" type="button" (click)="gotoProducts2()">Back 3</button>