कोणीय रूटिंग समझाया, URL पथ के आधार पर घटक पर नेविगेट कैसे करें

अपने पिछले लेख में, मैंने कोणीय 2+ संस्करण के साथ बुनियादी कोणीय अनुप्रयोग बनाने के लिए चरणों की व्याख्या की है।

यहां मैं अगले चरण की व्याख्या करूंगा कि URL पथ के आधार पर विभिन्न घटकों पर नेविगेट करने के लिए रूटिंग कैसे लिखें। आपको ध्यान में रखते हुए कि घटक और मॉड्यूल क्या है। यदि आपको यहां मॉड्यूल और घटक टिप्पणी के बारे में कोई संदेह है।

रूटिंग को लागू करने के लिए यहां चरण दिए गए हैं:

चरण 1:

AppRoutModule बनाने के लिए कमांड के नीचे चलाएँ

एनजी जी मॉड्यूल ऐप - रूटिंग

यह नीचे सामग्री के साथ app-routing.module.ts फ़ाइल का निर्माण करेगा।

'@ कोणीय / कोर' से {NgModule} आयात करें;
'@ कोणीय / राउटर' से {Routes, RouterModule} आयात करें;
@NgModule ({आयात: [RouterModule.forChild (मार्गों)], निर्यात: [RouterModule]})
निर्यात वर्ग AppRoutModule {}

चरण 2:

मार्गों के साथ उपरोक्त फ़ाइल संपादित करें:

कास्ट मार्ग: मार्ग = [{पथ: 'होम', घटक: होमकम्पोनेंट}]

यहाँ मैंने एक प्रकार का रूट बनाया है और संबंधित पथ और घटक को सौंपा है। इस तरह आप संबंधित घटक के साथ कई पथ जोड़ सकते हैं। फ़ाइल को संपादित करने के बाद यह नीचे की तरह दिखाई देगा:

'@ कोणीय / कोर' से {NgModule} आयात करें;
'@ कोणीय / राउटर' से {Routes, RouterModule} आयात करें;
कांस्ट मार्ग: मार्ग = [{पथ: 'घर', घटक: होमकम्पोनेंट}, {पथ: 'लॉगिन', घटक: LoginComponent}]
@NgModule ({आयात: [RouterModule.forChild (मार्गों)], निर्यात: [RouterModule]})
निर्यात वर्ग AppRoutModule {}

अब आप इस AppRoutModule को अपने App मॉड्यूल फ़ाइल में नीचे की तरह आयात कर सकते हैं:

आयात: [
AppRoutingModule,
]

अब आप मुझसे पूछ सकते हैं कि डिफ़ॉल्ट मार्ग को कैसे परिभाषित किया जाए। यहां आपको डिफ़ॉल्ट मार्ग बनाने के लिए नीचे दिए गए पथ को परिभाषित करने की आवश्यकता है:

{path: '', redirectTo: '/ home', pathMatch: 'full'}

इसे नीचे के मार्गों की तरह जोड़ें:

कास्ट रूट: रूट = [
{पाथ: 'होम', कम्पोनेंट: होमकम्पोनेंट},
{path: '', redirectTo: '/ home', pathMatch: 'full'},
{पथ: 'लॉगिन', घटक: LoginComponent}
]

आप नीचे का उपयोग करके अवैध URls के लिए मार्ग को परिभाषित कर सकते हैं:

{पथ: '**', पुनर्निर्देशन: '/ त्रुटि पेज', पथप्रदर्शक: 'पूर्ण'}

यह लेख मेरे अगले लेख पर जारी है, वहां मैं समझाऊंगा कि कैसे बाल मार्ग बनाने के लिए, कैसे आलसी लोडिंग बनाने के लिए और बहुत कुछ।