कोणीय में रूटिंग मुद्दा

Question

शुरुआत के लिए, मैंने कुछ दिन पहले कोणीय के साथ शुरू किया है और रूटिंग में इस अजीब मुद्दे को पाया है। मैंने "RouterModule" को आयात किया, पथ और घटक को तदनुसार जोड़ा। इसके अलावा, app.component.html फ़ाइल में राउटर आउटलेट जोड़ा गया। यहाँ मेरे मुद्दे हैं:

1. मैं एक घटक या पेज से दूसरे में नावबार के माध्यम से नहीं जा सकता। उदाहरण के लिए यदि मैं होम पेज पर हूं, तो मैं आसानी से किसी अन्य पेज पर जा सकता हूं, लेकिन यदि मैं किसी भिन्न पृष्ठ पर जाना चाहता हूं और लिंक पर क्लिक करना चाहता हूं, तो मैं स्वचालित रूप से पहले होम पेज पर रीडायरेक्ट हो जाता हूं।

2. मेरे द्वारा खोले गए सभी नए पृष्ठों में अभी भी पूरा होम पेज कोड है। हालाँकि, मुझे पता है कि यह सिर्फ होम पेज के ऊपर राउटर-आउटलेट जोड़ने के कारण है (मैंने app.component.html में अपना होम पेज कोड लिखा था), लेकिन इससे बेहतर विकल्प क्या हो सकता है।

Ps प्रश्न बहुत शुरुआती स्तर के हो सकते हैं, लेकिन कृपया मेरे साथ रहें।

धन्यवाद!!

Answer 1

1. सुनिश्चित करें कि आप इस तरह से नेविगेट करते हैं <a routerlink="/contact">Contact Page</a>। करो नहीं href का उपयोग करें।
2. एक और घटक जोड़ें जहां आप जोड़ते हैं router-outlet। फिर आप अपने "होम" पृष्ठ को डिफ़ॉल्ट मार्ग बनाते हैं। निश्चित रूप से आप आउटलेट के बाहर स्थिर घटकों को रख सकते हैं (शायद नावबार और फुटर?) और घटक पक्ष को उन के साथ जोड़ सकते हैं router-outlet।

Answer 2

1. सुनिश्चित करें कि आपके पास राउटर कॉन्फ़िगरेशन ठीक से सेट है, उदाहरण के लिए।

const routes: Routes = [
  {
    path: "home",
    component: HomeComponent,
    children: [
      { path: "child-1", component: ChildComponent1},
      { path: "child-2", component: ChildComponent2 }
    ]
  },
  { path: "", redirectTo: "home", pathMatch: "full" }
];

1. router-outletअपने app.component.html में जोड़ें
2. अपने मूल घटक में, ऊपर के उदाहरण में home.component.html बच्चों को जोड़ने routerLinkऔर router-outletलोड करने के लिए,

<div>
  <button routerLink="child-1">Child-1</button>
  <button routerLink="child-2">Child-2</button>
  <router-outlet></router-outlet>
</div>