import { Routes } from '@angular/router';
export const routes: Routes = [];
Routing คือการกำหนดการทำงานตามที่อยู่ใน URL เช่น /Person, /editPersons ให้แสดงหน้าและ Component ที่แตกต่างกัน ซึ่งในบทความนี้ผมจะมาแนะนำวิธีการสร้างและจัดการ Routing บน Angular
Routing
หลังจากที่เราสร้าง project จะเกิดไฟล์ app.routes.ts ขึ้นโดยอัตโนมัติ ซึ่งไฟล์นี้จะเป็นไฟล์ที่ทำงานเกี่ยวกับการ Routing โดยเฉพาะ จะมีลักษณะเนื้อหาภายในไฟล์ ดังนี้
app.routes.ts
จากเดิมเมื่อผมเข้ามาใน http://localhost:3000 แล้วจะพบกับ PersonsTableComponent ที่เราได้ทำไปในสองบทความที่แล้วเลยทันที แต่ตอนนี้ผมต้องการจะเปลี่ยนให้ Component ตัวนี้ไปแสดงเมื่อเราเปิดไปที่ URL: http://localhost:3000/Persons แทน
ก่อนแรกผมจะต้อง Import PersonsTableComponent มาที่ ไฟล์ app.routes.ts ก่อน ดังนี้
app.routes.ts
import { Routes } from '@angular/router';
import { PersonsTableComponent } from './persons-table/persons-table.component';
export const routes: Routes = [];
และผมก็จะกลับไปแก้ไขที่ไฟล์ app.component.ts ให้ส่วนของ @Component imports เพียงแค่ RouterOutlet แทน โดยที่ code เดิม จะ Imports RouterOutlet และ PersonsTableComponent ดัง code ข้างล่างนี้
app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { PersonsTableComponent } from './persons-table/persons-table.component';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet,PersonsTableComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'text-app';
}
ผมจะแก้ไขให้เหลือแค่ RouterOutlet เท่านั้น
app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'test-app';
}
ไปที่ไฟล์ app.component.html จากเดิมที่เรานำ PersonsTableComponent มาแสดงแบบนี้
app.component.html
<div>
<h1>Table of Persons</h1>
<app-persons-table></app-persons-table>
</div>
ผมจะเปลี่ยนให้เป็น Component ของ Router นั่นก็คือ router-outlet แทน
app.component.html
<div>
<h1>Welcome</h1>
<router-outlet></router-outlet>
</div>
ก่อนอื่น ผมจะสร้าง Component ใหม่สำหรับเป็น หน้าหลัก (Homepage) ก่อน โดยใช้คำสั่ง
ng generate component Home
จากนั้นผมจะไปแก้ไขใน /src/app/home/home.component.html เล็กน้อย พอให้เห็นถึงความแตกต่าง โดยจะใส่ปุ่มที่จะสามารถกดและข้ามไป URL: /Persons ได้ด้วย เสมือนเป็นเมนู
home.component.html
<p>
This is Home Page!
<a [routerLink]="['/Persons']">Go to Persons Page</a>
</p>
ในการเปลี่ยนหน้าไปมาเราจะต้องใช้ RouterLink ซึ่งผมจะ Import มาเข้ามาใส่ใน Component ที่ใช้ RouterLink ซึ่งก็คือใน home.component.ts
home.component.ts
import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
@Component({
selector: 'app-home',
standalone: true,
imports: [RouterLink],
templateUrl: './home.component.html',
styleUrl: './home.component.css'
})
export class HomeComponent {
}
ทีนี้เราก็จะกลับไปสร้าง Router ใน app.routes.ts โดยจะเพิ่ม Object ซึ่งเป็นข้อมูลของ path และ component เข้าไประหว่าง Routes = [] ดังนี้ (อย่าลืม import HomeComponent)
app.routes.ts
import { Routes } from '@angular/router';
import { PersonsTableComponent } from './persons-table/persons-table.component';
import { HomeComponent } from './home/home.component';
export const routes: Routes = [
{
path: "",
component: HomeComponent
},
{
path: "Persons",
component: PersonsTableComponent
},
];
เมื่อผมเปิด URL: http://localhost เฉยๆ จะเจอเพียงข้อความ Welcome และปุ่ม "Go to Persons Page" เมื่อกดปุ่ม จะแสดง Welcome พร้อมด้วยตารางจาก PersonsTableComponent และที่อยู่ใน URL จะเปลี่ยนเป็น http://localhost/Persons
สมมุติถ้าผมต้องการตั้งให้ หากไม่เข้าเงื่อนไขใน Routing เลย ให้ใช้ Component ที่ชื่อ "NotFoundComponent" ผมก็จะเขียนดังนี้
app.routes.ts
import { Routes } from '@angular/router';
import { PersonsTableComponent } from './persons-table/persons-table.component';
import { HomeComponent } from './home/home.component';
export const routes: Routes = [
{
path: "",
component: HomeComponent
},
{
path: "Persons",
component: PersonsTableComponent
},
{
path: "**",
component: NotFoundComponent
},
];
ทีนี้เราก็สามารถสร้างและจัดการ Routing ได้แล้ว! ง่ายมากๆ
อ้างอิง:
angular.io/guide/router
- Name (Pen name): Sunny Jirakit (Sunny420x)
- Study: Bachelor Degree of Computer Science from Chiang Mai Rajabhat University
- Personality: Architect (INTJ-T)
- Experience: JavaScript, Angular.js, React.js, Next.js Express.js, Unity C#, Socket.io
