Angular में चाइल्ड रूट्स

ऐसा हो सकता है कि एक कंपोनेंट में, जो पहले से ही रूटिंग में शामिल है, चाइल्ड कंपोनेंट्स भी हों। हम ऐसा व्यवस्थित कर सकते हैं कि ये चाइल्ड कंपोनेंट्स भी रूटिंग के माध्यम से दिखाई दें।

उदाहरण के लिए मान लीजिए कि हमारे पास एक कंपोनेंट Aaaa है। हम इस तक यूआरएल /aaaa/ के माध्यम से पहुंचते हैं। आइए दो और चाइल्ड कंपोनेंट्स बनाएं: Chix और Chiy। हम इन्हें कंपोनेंट Aaaa के अंदर दिखाएंगे। Aaaa का अपना टैग router-outlet होगा, जिसमें यूआरएल के आधार पर या तो एक, या दूसरा चाइल्ड कंपोनेंट दिखाई देगा।

तो, आइए वर्णित को लागू करें।

पहला चाइल्ड कंपोनेंट बनाएं:

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
  },
];

पैरेंट कंपोनेंट के रूट का पथ चाइल्ड के पथ की शुरुआत होगी। इसका मतलब है कि चाइल्ड कंपोनेंट्स निम्नलिखित यूआरएल पर उपलब्ध होंगे: /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>

अब चाइल्ड कंपोनेंट्स को उनके यूआरएल के माध्यम से एक्सेस किया जा सकेगा और ये कंपोनेंट्स दिखाई देंगे। आज़माएं!