Laluan Anak dalam Angular

Mungkin berlaku bahawa dalam komponen yang sudah digunakan dalam penghalaan, juga terdapat komponen anak. Kita boleh mengatur agar komponen anak ini juga ditunjukkan melalui penghalaan.

Sebagai contoh, katakan kita ada komponen Aaaa. Kita mengaksesnya melalui URL /aaaa/. Mari buat dua komponen anak: Chix dan Chiy. Kita akan menunjukkannya di dalam paparan komponen Aaaa. Aaaa akan mempunyai tag sendiri router-outlet, di mana bergantung pada URL, sama ada satu atau komponen anak kedua akan ditunjukkan.

Jadi, mari kita laksanakan apa yang diterangkan.

Mari buat komponen anak pertama:

ng generate component chix

Mari buat komponen anak kedua:

ng generate component chiy

Mari tulis laluan anak yang berasingan:

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

Tambahkan mereka ke laluan komponen Aaaa sebagai anak:

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

Laluan dari laluan komponen induk akan menjadi permulaan laluan anak. Ini bermakna komponen anak akan boleh diakses melalui URL berikut: /aaaa/chix dan /aaaa/chiy.

Sekarang mari kita konfigurasikan komponen Aaaa. Import tag untuk penghalaan:

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

Tulisnya dalam dekorator:

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

Masukkan tag ke dalam paparan:

<p>ia berfungsi</p>
<router-outlet></router-outlet>

Sekarang anda boleh mengakses komponen anak melalui URL mereka dan komponen ini akan ditunjukkan. Cubalah!

Laksanakan kerja komponen anak seperti yang diterangkan.

Buat pautan yang akan menukar komponen anak.