Angular-এ চাইল্ড রাউট

এটি হতে পারে যে একটি কম্পোনেন্টে, যা ইতিমধ্যে রাউটিং-এ জড়িত, সেখানে চাইল্ড কম্পোনেন্টও রয়েছে। এটি করা সম্ভব, যাতে এই চাইল্ড কম্পোনেন্টগুলিও রাউটিং এর মাধ্যমে প্রদর্শিত হয়।

উদাহরণস্বরূপ, ধরা যাক আমাদের একটি Aaaa কম্পোনেন্ট আছে। আমরা এটিকে /aaaa/ URL এর মাধ্যমে অ্যাক্সেস করি। আরও দুটি চাইল্ড কম্পোনেন্ট তৈরি করা যাক: 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 দ্বারা অ্যাক্সেস করা সম্ভব হবে এবং এই কম্পোনেন্টগুলি দেখানো হবে। চেষ্টা করে দেখুন!

বর্ণিত চাইল্ড কম্পোনেন্টগুলির কাজ বাস্তবায়ন করুন।

লিঙ্ক তৈরি করুন, যেগুলির মাধ্যমে চাইল্ড কম্পোনেন্টগুলি পরিবর্তন হবে।