การจัดการกับ Child Routes ของ Routing ใน Angular ตอนที่ 5

C:\projects\simplerouter>ng g module user --routing

C:\projects\simplerouter>ng g c user/user-center --flat

C:\projects\simplerouter>ng g c user/user-list --flat

C:\projects\simplerouter>ng g c user/user-detail --flat

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

export class User {
    constructor(
        public id:number,
        public firstname:string,
        public lastname:string,
        public gender:string,
        public age:number
    ){}
}

C:\projects\simplerouter>ng g class user/mock-users

import { User } from './user';

export var USERS:User[] = [
   {
       id:1,
       firstname:'Jubjang',
       lastname:'Phodum',
       gender:'female',
       age:24
   },
   {
        id:2,
        firstname:'Manop',
        lastname:'Phoomee',
        gender:'male',
        age:32
    },
    {
        id:3,
        firstname:'Prakit',
        lastname:'Deeprom',
        gender:'male',
        age:27       
    }

];

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

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

import { USERS } from './mock-users';

@Injectable()
export class UserService {

  constructor() { }

  getUsers(){
    return USERS;
  }

  getUser(id:number|string){
    return USERS.filter(
      function(user,i){    
        return user.id == id ? user : null;
      }
    );    
  }

}

<h3>{{title}}</h3>
<router-outlet></router-outlet>

import { Component, OnInit } from '@angular/core';

@Component({
//  selector: 'app-user-center',
  templateUrl: './user-center.component.html',
  styleUrls: ['./user-center.component.css']
})
export class UserCenterComponent implements OnInit {
  public title:string;
  
  constructor() { }

  ngOnInit() {
    this.title = 'User Child Routing';
  }

}

<p> user-list works! </p>
<table class="table">
  <thead>
    <tr class="active">
      <th>#</th>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>View</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let user of users; let i=index;" [class.warning]="highlightId == user.id" >
      <td>{{ i+1 }}</td>
      <td>{{ user.firstname }}</td>
      <td>{{ user.lastname }}</td>
      <td>
      <button type="button" routerLink="/users/{{ user.id }}"  class="btn btn-sm btn-success">
       View </button>
       </td>
    </tr>
  </tbody>
</table>

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

import { User } from './user';

import { UserService } from './user.service';

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

  public users:User[];
  private highlightId:number|string;
 
  constructor(
    private userService: UserService,
    private route: ActivatedRoute,
    private router: Router        
  ) { }
 
  ngOnInit() {
    this.users = this.userService.getUsers();
    let params = this.route.snapshot.paramMap;
    if(params.has('id')){
      this.highlightId = params.get('id');
    }
  }

}

<p> user-detail works! </p>
<table class="table" *ngFor="let user of users">
  <tr>
    <th class="active text-right" width="120">ID</th>
    <td>{{ user.id }}</td>
  </tr>
  <tr>
    <th class="active text-right" width="120">Firstname</th>
    <td>{{ user.firstname }}</td>
  </tr>
  <tr>
    <th class="active text-right" width="120">Lastname</th>
    <td>{{ user.lastname }}</td>
  </tr>
  <tr>
    <th class="active text-right" width="120">Gender</th>
    <td>{{ user.gender }}</td>
  </tr>
  <tr>
    <th class="active text-right" width="120">Age</th>
    <td>{{ user.age }}</td>
  </tr>
</table>
<button class="btn" type="button" routerLink="/users">Back 1</button>
<button class="btn btn-info" type="button" (click)="gotoUsers()">Back 2</button>
<button class="btn btn-warning" type="button" (click)="gotoUsers2()">Back 3</button>

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

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 users:User[];
  private id:number|string;
   
  constructor(
    private userService:UserService,
    private route: ActivatedRoute,
    private router: Router        
  ) { }
 
  ngOnInit() {
    let params = this.route.snapshot.paramMap;
    if(params.has('id')){
      this.id = params.get('id');
    }    
    this.users = this.userService.getUser(this.id);
  }
 
  gotoUsers() {
    this.router.navigate(['/users']);
  }  
 
  gotoUsers2(){
    this.router.navigate(['/users',{id:this.id,more:'test'}]);
  }

}

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

const userRoutes: Routes = [
  {
    path:'users',
    component:UserCenterComponent,
    children:[
      {
        path: '',
        component: UserListComponent
      },
      {
        path:':id',
        component:UserDetailComponent
      }

    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(userRoutes)],
  exports: [RouterModule]
})
export class UserRoutingModule { }

const productRoutes: Routes = [
  { path: 'products', component: ProductListComponent },
  { path: 'product/:id', component: ProductDetailComponent }

];

const userRoutes: Routes = [
  {
    path:'users',
    component:UserCenterComponent,
    children:[
      {
        path: '',
        component: UserListComponent
      },
      {
        path:':id',
        component:UserDetailComponent
      }

    ]
  }
];

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

import { UserRoutingModule } from './user-routing.module';
import { UserCenterComponent } from './user-center.component';
import { UserListComponent } from './user-list.component';
import { UserDetailComponent } from './user-detail.component';

import { UserService } from './user.service';

@NgModule({
  imports: [
    CommonModule,
    UserRoutingModule
  ],
  providers:[
    UserService
  ],  
  declarations: [UserCenterComponent, UserListComponent, UserDetailComponent]
})
export class UserModule { }

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
 
 
import { HomeComponent } from './home/home.component';
import { PagenofoundComponent } from './pagenofound/pagenofound.component';
 
const appRoutes: Routes = [
  { 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
  ]
})
export class AppRoutingModule { }

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { ProductModule } from './product/product.module';
import { UserModule } from './user/user.module';
 
import { HomeComponent } from './home/home.component';
import { PagenofoundComponent } from './pagenofound/pagenofound.component';
  
  
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    PagenofoundComponent
  ],
  imports: [
    BrowserModule,
    ProductModule,
    UserModule,
    AppRoutingModule // routing หลักไว้ลำดับสุดท้ายเสมอ
  ], 
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }