ใช้งาน Observable paramMap และ component reuse ใน Angular ตอนที่ 6

ถ้าเราเรียกผ่าน route path เป็น /users
    user-list component มาแสดงใน outlet ที่อยู่ใน user-center component
    user-center component มาแสดงใน outlet ที่อยู่ใน app component 
ถ้าเราคลิกดูรายละเอียด user แต่ละคน route path ก็จะเป็น สมมติ /users/1
    user-detail component มาแสดงใน outlet ที่อยู่ใน user-center component
    user-center component มาแสดงใน outlet ที่อยู่ใน app component

ถ้าเราเรียกผ่าน route path เป็น /users
    user-list component มาแสดงใน outlet ที่อยู่ใน user-center component
    user-center component มาแสดงใน outlet ที่อยู่ใน app component 
ถ้าเราคลิกดูรายละเอียด user แต่ละคน route path ก็จะเป็น สมมติ /users/1
    user-detail component มาแสดงใน outlet ที่อยู่ใน user-list component
    user-list component มาแสดงใน outlet ที่อยู่ใน user-center component
    user-center component มาแสดงใน outlet ที่อยู่ใน app component

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

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

<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$ | async; 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>
<router-outlet></router-outlet>

routerLink="/users/{{ user.id }}" 

[routerLink]="['/users', user.id]"

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

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$:Observable<User[]>;
  private highlightId:number|string;
 
  constructor(
    private userService: UserService,
    private route: ActivatedRoute,
    private router: Router        
  ) { }
 
  ngOnInit() {
    this.users$ = this.route.paramMap
    .switchMap((params: ParamMap) => {
      this.highlightId = +params.get('id');      
      return this.userService.getUsers();
    });    
  }

}

public users$:Observable<User[]>;

this.highlightId = this.route.paramMap
.switchMap((params: ParamMap) => {
   return params.get('id');      
});  
this.users$ = this.userService.getUsers();

private highlightId:Observable<number|string>;

this.users$ = this.route.paramMap
.switchMap((params: ParamMap) => {
  this.highlightId = +params.get('id');      
  return this.userService.getUsers();
});    

<p> user-detail works! </p>
<table class="table" *ngIf="user">
  <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 { 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'}]);
  }

}

var observer = {
  next: x => console.log('Observer got a next value: ' + x),
  error: err => console.error('Observer got an error: ' + err),
  complete: () => console.log('Observer got a complete notification'),
};
observable.subscribe(observer);

observable.subscribe({
  next: x => console.log('Observer got a next value: ' + x),
  error: err => console.error('Observer got an error: ' + err),
  complete: () => console.log('Observer got a complete notification'),
});

observable.subscribe({
  next: function(x){
    console.log('Observer got a next value: ' + x)
  },
  error: function(err){
    console.error('Observer got an error: ' + err)
  },
  complete: function(){
    console.log('Observer got a complete notification')
  }
});   

observable.subscribe(
  function(x){
    // next
  },
  function(err){
    // error
  },
  function(){
    // complete
  }
);   

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

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

function(data: { user: User }){
  this.id = data.user.id;
  this.user = data.user;
} 

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

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

@Injectable()
export class UserService {

  constructor() { }

  getUsers(){
    return Observable.of(USERS); // รูปแบบเดิมใช้เป็น return USERS;
  }

  getUser(id:number|string){
    return this.getUsers()
    .map(users => users.find(user => user.id === +id));    
  }

}

C:\projects\simplerouter>ng g service /user/user-detail-resolver

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 { }

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