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

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

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

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

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

ng generate component chix

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

ng generate component chiy

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

let childRoutes: Routes = [
	{ path: 'chix', component: ChixComponent },
	{ path: 'chiy', component: ChiyComponent },
];

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

const appRoutes: Routes = [
	{
		path: 'aaaa',
		component: AaaaComponent,
		children: childRoutes
	},
];

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

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

import { RouterOutlet } from '@angular/router';

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

@Component({
	......
	imports: [RouterOutlet],
	......
})

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

<p>มันทำงานแล้ว</p>
<router-outlet></router-outlet>

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

นำการทำงานของคอมโพเนนต์ย่อยที่อธิบายไว้ไปปฏิบัติ

สร้างลิงก์สำหรับสลับแสดง คอมโพเนนต์ย่อย