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 සහ /aaaa/chiy.

දැන් අපි Aaaa සංරචකය සකස් කරමු. ගමන් මාර්ගකරණය සඳහා ටැගය ආයාත කරමු:

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

එය දේශනය තුළ ලියන්න:

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

ටැගය දර්ශනයට ඇතුල් කරමු:

<p>එය ක්‍රියාත්මක වේ</p>
<router-outlet></router-outlet>

දැන් ඔබට ඔවුන්ගේ URL මගින් දරු සංරචක වෙත ප්‍රවේශ වීමට හැකි වන අතර මෙම සංරචක පෙන්වනු ඇත. උත්සාහ කරන්න!

විස්තර කරන ලද දරු සංරචකවල ක්‍රියාකාරිත්වය ක්‍රියාත්මක කරන්න.

දරු සංරචක සංක්‍රමණය වන සබැඳි සාදන්න.