Angular Router: RouterModule, routerLink, ActivatedRoute

Angular Router คือระบบนำทางของ Angular สำหรับเชื่อม URL กับ Component ทำให้แอปแบบ Single Page Application สามารถมีหลายหน้า หลาย URL และรองรับ route parameter ได้

Timeline/ประวัติศาสตร์

%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart LR
  subgraph Era1["ยุค Multi-page / Server Navigation"]
    A["Server Render
เปลี่ยนหน้าด้วย Request ใหม่"]
  end
  subgraph Era2["ยุค SPA / Client Routing"]
    B["Client Router
เปลี่ยน Component ใน Browser"]
    C["Route Params
URL มีข้อมูล"]
  end
  subgraph Era3["ยุค Modular Routing / Angular Router"]
    D["RouterModule
กำหนด Route"]
    E["Lazy Routes
โหลดเมื่อจำเป็น"]
  end
  A --> B --> C --> D --> E

แนวคิดสำคัญ

• RouterModule.forRoot(routes) ใช้ลงทะเบียน Route หลักของแอป
• Route Configuration เขียนได้เช่น { path: 'users', component: UsersComponent }
• <router-outlet> คือจุดที่ Router นำ Component มาแสดง
• routerLink ใช้นำทางใน Template เช่น [routerLink]="['/users', userId]"
• routerLinkActive="active" เพิ่ม CSS Class เมื่อ Route ตรง
• router.navigate(['/path']) ใช้นำทางด้วย TypeScript
• ActivatedRoute ใช้ดึง Route Params, Query Params และ Route Data

ตารางเปรียบเทียบเครื่องมือ Router

Mermaid Diagram: Router Flow

%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart TD
  A["URL /users/12
ที่อยู่หน้าเว็บ"] --> B["Router
ตรวจเส้นทาง"]
  B --> C["Route Config
กำหนด path"]
  C --> D["UsersDetailComponent
Component ปลายทาง"]
  D --> E["router-outlet
ตำแหน่งแสดงผล"]
  D --> F["ActivatedRoute
อ่าน id = 12"]

Code Example

// app-routing.module.ts
// กำหนด Route หลักของแอป
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { UsersComponent } from './users/users.component';
import { UserDetailComponent } from './user-detail/user-detail.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'users', component: UsersComponent },
  { path: 'users/:id', component: UserDetailComponent },
  { path: '**', redirectTo: '' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

<!-- app.component.html -->
<!-- routerLink ใช้นำทางโดยไม่ reload หน้า -->
<nav>
  <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Home</a>
  <a routerLink="/users" routerLinkActive="active">Users</a>
</nav>

<router-outlet></router-outlet>

// user-detail.component.ts
// อ่าน route param ด้วย ActivatedRoute
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-user-detail',
  template: `<p>User ID: {{ userId }}</p>`
})
export class UserDetailComponent implements OnInit {
  userId = '';

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

  ngOnInit(): void {
    this.userId = this.route.snapshot.paramMap.get('id') ?? '';
  }

  goBack(): void {
    this.router.navigate(['/users']);
  }
}

// ตัวอย่างการใช้งาน:
// เปิด /users/12 แล้ว Component จะอ่าน id ได้เป็น 12

กิจกรรมท้ายบท

1. สร้างหน้า Home, Users และ User Detail
2. กำหนด Route /users/:id
3. ใช้ routerLink นำทางไปยัง User Detail
4. อ่าน id ด้วย ActivatedRoute

กลับสัปดาห์ที่ 9