การตั้งค่า Routing พื้นฐานใน Angular

ตอนนี้มาทำการตั้งค่า routing กัน ให้ทำดังนี้: หากในแถบที่อยู่ของเบราว์เซอร์มีการป้อน URL /aaaa/ ก็ให้แสดงคอมโพเนนต์แรก และหากป้อน /bbbb/ ก็ให้แสดงคอมโพเนนต์ที่สอง

การตั้งค่านี้ทำได้ในไฟล์ app.routes.ts ก่อนอื่นต้อง นำเข้าคอมโพเนนต์ของเรา:

app/app.routes.tsimport { AaaaComponent } from './aaaa/aaaa.component';
import { BbbbComponent } from './bbbb/bbbb.component';

และตอนนี้ต้องระบุว่า URL ใดตรงกับคอมโพเนนต์ใด สำหรับสิ่งนี้ ต้องสร้างอาร์เรย์พิเศษของออบเจ็กต์ที่ประกอบด้วย เส้นทาง (routes) ในแต่ละ ออบเจ็กต์จะมีคีย์ path ซึ่ง กำหนด URL (โดยไม่ต้องมี slash ต่อท้าย) และคีย์ component ซึ่งกำหนด คอมโพเนนต์ที่จะแสดงตาม URL นั้น:

app/app.routes.tsexport const routes: Routes = [
  { path: 'aaaa', component: AaaaComponent },
  { path: 'bbbb', component: BbbbComponent },
];

อย่างไรก็ตาม การตั้งค่า routing ยังไม่เพียงพอ จำเป็นต้องระบุตำแหน่งในคอมโพเนนต์หลัก ที่คอมโพเนนต์ของเราจะถูกแสดงออกมา เราจะจัดการกับสิ่งนี้ในบทเรียนถัดไป