Angular में चाइल्ड रूट्स
ऐसा हो सकता है कि एक कंपोनेंट में, जो पहले से ही रूटिंग में शामिल है, चाइल्ड कंपोनेंट्स भी हों। हम ऐसा व्यवस्थित कर सकते हैं कि ये चाइल्ड कंपोनेंट्स भी रूटिंग के माध्यम से दिखाई दें।
उदाहरण के लिए मान लीजिए कि हमारे पास एक कंपोनेंट Aaaa है।
हम इस तक यूआरएल /aaaa/ के माध्यम से पहुंचते हैं।
आइए दो और चाइल्ड कंपोनेंट्स बनाएं: Chix
और Chiy। हम इन्हें कंपोनेंट Aaaa के
अंदर दिखाएंगे।
Aaaa का अपना टैग
router-outlet होगा, जिसमें यूआरएल के
आधार पर
या तो एक, या
दूसरा चाइल्ड कंपोनेंट दिखाई देगा।
तो, आइए वर्णित को लागू करें।
पहला चाइल्ड कंपोनेंट बनाएं:
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
},
];
पैरेंट कंपोनेंट के रूट का पथ
चाइल्ड के पथ की शुरुआत होगी। इसका मतलब
है कि चाइल्ड कंपोनेंट्स निम्नलिखित
यूआरएल पर उपलब्ध होंगे: /aaaa/chix और
/aaaa/chiy।
आइए अब Aaaa कंपोनेंट को कॉन्फ़िगर करें।
रूटिंग के लिए टैग इम्पोर्ट करें:
import { RouterOutlet } from '@angular/router';
इसे डेकोरेटर में लिखें:
@Component({
......
imports: [RouterOutlet],
......
})
टैग को व्यू में डालें:
<p>यह काम करता है</p>
<router-outlet></router-outlet>
अब चाइल्ड कंपोनेंट्स को उनके यूआरएल के माध्यम से एक्सेस किया जा सकेगा और ये कंपोनेंट्स दिखाई देंगे। आज़माएं!
वर्णित चाइल्ड कंपोनेंट्स के काम को लागू करें।
ऐसे लिंक बनाएं, जिन पर क्लिक करने से चाइल्ड कंपोनेंट्स बदल जाएं।
