บทความนี้เป็นส่วนหนึ่งของซีรีส์ Angular + PrimeNG 19 (CSR, non-standalone) เรียบเรียงจากคู่มืออบรมของ Wutthiphon Tassana — Wirabyte CO., LTD. — ตอนที่ 5/10
RouterModule คือไฟล์ที่ไว้จัดการ Route ทั้งหมดภายในโปรเจคซึ่งคือไฟล์ app-routing.module.ts โดยมีโครงสร้างดังนี้
วิธีการใช้งานให้ import component ที่เป็น page ที่ไฟล์นี้ จากนั้นเพิ่มใน array routes กำหนด path และ component ที่จะใช้งานกับ path นั้น ๆ
const routes: Routes = [
{ path: <url>, component: <Component> }
]เช่น ต้องการ /admin แล้วให้แสดง adminComponent ให้ใส่
const routes: Routes = [
{ path: “admin”, component: adminComponent }
]กรณี ไม่เจอหน้าใด ๆ แล้วต้องการให้ Return หน้าสามารถใช้
const routes: Routes = [
{ path: “**”, component: <Component>} // เช่น PageNotFoundComponent
]นอกจากนี้ในแต่ละ Path สามารถมี properties เพิ่มเติมได้เช่น
- pathMatch: ใช้กำหนดว่า Angular จะ จับคู่ path อย่างไร full | prefix
- redirectTo: เปลี่ยนเส้นทางไปที่อื่น
- canActivate: ใช้กับ Route Guard (Service ที่ implement CanActivate)
- loadChildren: ใช้สำหรับ Lazy Loading Module
RouterLink และ RouterOutlet
RouterLink เป็น Directive ของ Angular Router ที่สามารถใช้เป็น attribute บน HTML Element ได้เกือบทุกชนิด เช่น <a>, <button>, <div> เป็นต้น โดยหน้าที่ของมันคล้ายกับ href แต่แตกต่างตรงที่ จะไม่ทำการ reload หน้าใหม่จาก browser แต่เป็นการ เปลี่ยนเส้นทาง (navigate) และ render เฉพาะส่วนที่เกี่ยวข้อง ตามที่ Angular Router จัดการ ทำให้ประสบการณ์ใช้งานต่อเนื่อง (Single Page Application – SPA)
ตัวอย่าง
<a routerLink="/try-page"> Try-Page </a>
<label routerLink="/try-page"> Try-Page </label>RouterOutlet เป็น Directive ของ Angular Router ที่แสดงผลเป็น Placeholder (ตำแหน่งว่าง) สำหรับ render Component ที่ถูกกำหนดไว้ในเส้นทาง (Route) ปัจจุบัน โดย Angular Router จะทำการสลับ Component ที่เกี่ยวข้องกับเส้นทางนั้น ๆ มาแสดงในตำแหน่งของ RouterOutlet
มักถูกใช้งานใน Component หลัก (root component) เช่น app.component.html เพื่อให้ทำหน้าที่เป็นโครงสร้างหลักของแอปพลิเคชัน แต่ก็สามารถซ้อน (nested RouterOutlet) ภายใน Component อื่น ๆ ได้เช่นกัน หากต้องการทำ child routes
ตัวอย่าง
ซึ่งใน LAB นี้ หากสังเกตเมื่อเข้า path / จะเห็นว่า Angular ทำการ render HomeComponent ขึ้นมา เนื่องจากมีการกำหนด Route สำหรับ path / ไว้ในไฟล์ routing module ของแอป (เช่น app-routing.module.ts) และ Component ดังกล่าวก็ถูกแสดงในตำแหน่งของ RouterOutlet ตามที่ตั้งค่าไว้
การส่งค่า params
การส่งค่า Params ผ่าน Route ของ Angular เป็นวิธีที่ใช้กันบ่อยเมื่อต้องการส่งค่าบางอย่างไปยังหน้า/Component อื่น เช่น id ของข้อมูล เพื่อใช้ในการแสดงผลหรือประมวลผลต่อไป โดย Angular Router รองรับการส่งค่า Route Parameters ได้ง่ายมาก เพียงกำหนดโครงสร้างเส้นทาง (Route) ที่มีตัวแปร และส่งค่าผ่าน routerLink หรือการเขียน navigate ก็ได้เช่นกัน
วิธีการกำหนดการรับ params และ ชื่อตัวแปร
const routes: Routes = [
{ path: <path>/:<params>', component: <Component> }
];วิธีการรับค่าใน Component
// Import ActivatedRoute as route this.route.paramMap.subscribe(params => {
// params.get('< params name>');
});ตัวอย่าง
const routes: Routes = [
{ path: 'user/:id', component: UserDetailComponent }
];
Route Guard
Route Guard ใน Angular ใช้ ควบคุมการเข้าออกเส้นทาง (Route) โดยจะทำงานก่อนที่ Router จะเปลี่ยนหน้า และจะคืนค่าเป็น true/false (หรือ Observable/Promise) เพื่อตัดสินใจว่าจะให้เข้า route นั้น ๆ หรือไม่ โดยหลัก ๆ ใช้เพื่อ
- ตรวจสอบว่าผู้ใช้ login แล้วหรือยัง
- เช็กสิทธิ์ (role) ว่ามีสิทธิ์เข้าเพจนั้นหรือไม่
- ป้องกันการออกจากหน้าโดยไม่บันทึกข้อมูล
คำสั่งสร้าง Guard
ng generate guard <path/guard name>
ng g gu <path/guard name>ตัวอย่าง
auth.guard.ts
ตัวอย่างนี้เป็นการตรวจสอบว่ามีการ Login หรือไม่ และ route ต้องการสิทธิ์ admin หรือไม่
app-routing.module.ts
ในไฟล์ route ก็จะใช้ canActivate เพื่อควบคุมการเข้าถึง และสามารถกำหนด data เพิ่มเติม ในตัวอย่างคือต้องมีสิทธิ์ admin ด้วยถึงจะเข้า route นั้น ๆ ได้ (isAdminRequired = true)
🧪 LAB: ทดลองทำ Routing อย่างง่าย
ใน Lab มีการสร้าง Component ชื่อ try-page ไว้ให้แล้ว ให้ทำการเพิ่ม route เพื่อแสดงผลหน้า try-page ผ่าน route ชี่อ /try-page
Import และสร้าง Route ที่ app.routing.module.ts
เพิ่ม attribute routerLink ที่ element tag a ของปุ่ม Try-Page ใน template/header.component
ลองคลิกที่ปุ่ม / พิมพ์ URL ก็จะได้ผลลัพธ์
จากเดิม ลองใช้ component เดิมแต่มีการรับ params เพิ่ม เช่น /try-page/250
สร้าง Route ที่ app.routing.module.ts
เพิ่มการรับค่าที่ ไฟล์ .ts ของ Component
เพิ่มการแสดงค่าที่ HTML ของ Component
ลองพิมพ์ URL ที่มี params ก็จะได้ผลลัพธ์
