เส้นทางย่อยใน Angular

อาจมีกรณีที่ในคอมโพเนนต์ซึ่ง ใช้งานในการกำหนดเส้นทางอยู่แล้ว ก็มี คอมโพเนนต์ย่อยอยู่ด้วย สามารถทำให้คอมโพเนนต์ย่อยเหล่านี้ แสดงผลผ่านการกำหนดเส้นทางได้เช่นกัน

ตัวอย่าง สมมติเรามีคอมโพเนนต์ Aaaa เราเข้าถึงมันผ่าน URL /aaaa/ สร้างคอมโพเนนต์ย่อยเพิ่มอีกสองตัว: Chix และ Chiy เราจะแสดงพวกมันภายใน เทมเพลตของคอมโพเนนต์ Aaaa คอมโพเนนต์ Aaaa จะมีแท็ก router-outlet ของตัวเอง ซึ่งขึ้นอยู่กับ URL จะแสดงผลคอมโพเนนต์ย่อยตัวหนึ่ง หรือ อีกตัวหนึ่ง

เอาล่ะ มาลงมือทำสิ่งที่อธิบายไว้กัน

สร้างคอมโพเนนต์ย่อยตัวแรก:

terminalng generate component chix

สร้างคอมโพเนนต์ย่อยตัวที่สอง:

terminalng generate component chiy

เขียนเส้นทางย่อยแยกกัน:

app/app.component.tslet childRoutes: Routes = [
  { path: 'chix', component: ChixComponent },
  { path: 'chiy', component: ChiyComponent },
];

เพิ่มพวกมันเข้าไปในเส้นทางของคอมโพเนนต์ Aaaa ในฐานะเส้นทางย่อย:

app/app.component.tsconst appRoutes: Routes = [
  {
    path: 'aaaa',
    component: AaaaComponent,
    children: childRoutes
  },
];

พาธจากเส้นทางของคอมโพเนนต์หลัก จะเป็นจุดเริ่มต้นของพาธย่อย นั่นหมายความว่า คอมโพเนนต์ย่อยจะสามารถเข้าถึงได้ผ่าน URL ต่อไปนี้: /aaaa/chix และ ⁅p�⁆/aaaa/chiy

ตอนนี้มาปรับตั้งค่าคอมโพเนนต์ Aaaa กัน นำเข้าแท็กสำหรับกำหนดเส้นทาง:

app/aaaa/aaaa.component.tsimport { RouterOutlet } from '@angular/router';

เขียนมันในเดคอเรเตอร์:

app/aaaa/aaaa.component.ts@Component({
  ......
  imports: [RouterOutlet],
  ......
})

แทรกแท็กเข้าไปในเทมเพลต:

app/aaaa/aaaa.component.html<p>มันทำงานแล้ว</p>
<router-outlet></router-outlet>

ตอนนี้จะสามารถเข้าถึงคอมโพเนนต์ย่อย ผ่าน URL ของพวกมัน และคอมโพเนนต์เหล่านี้ จะถูกแสดงผล ลองทำดู!