Angular में रूटिंग लिंक

पिछले पाठों में, हमने यूआरएल को हाथ से एड्रेस बार में टाइप किया था। आइए अब ऐसे लिंक बनाते हैं, जिन पर क्लिक करने से विभिन्न कंपोनेंट्स दिखाई दें।

इसके लिए, हम लिंक्स एक विशेष तरीके से बनाएंगे। बात यह है कि हमें लिंक्स पर वास्तविक नेविगेशन की आवश्यकता नहीं है। हम केवल इतना चाहते हैं कि Angular एक अलग कंपोनेंट दिखाए, ब्राउज़र के एड्रेस बार में यूआरएल बदल दे, और साथ ही पेज रिफ्रेश न हो।

इसलिए, मूल href एट्रिब्यूट के बजाय, हम Angular के RouterLink एट्रिब्यूट का उपयोग करेंगे।

इसके लिए हमें इसे इम्पोर्ट करने की आवश्यकता है:

import { RouterLink } from '@angular/router';

डेकोरेटर में डिक्लेयर करें:

@Component({
	......
	imports: [RouterOutlet, RouterLink],
	......
})

अब हम अपने लिंक बना सकते हैं:

<nav>
	<a routerLink="/aaaa/">
		Aaaa
	</a>
	<a routerLink="/bbbb/">
		Bbbb
	</a>
</nav>

ऐसे लिंक बनाएं जो आपके कंपोनेंट्स को स्विच करें।