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

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

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