Angular में कंपोनेंट में रूट पैरामीटर्स का उपयोग

आइए अब देखें कि हम कंपोनेंट क्लास के अंदर रूट पैरामीटर्स का उपयोग कैसे कर सकते हैं।

मान लीजिए कि हमारे पास पैरामीटर्स के साथ निम्नलिखित रूट है:

const routes: Routes = [
	{ path: 'aaaa/:id', component: AaaaComponent },
	{ path: 'bbbb', component: BbbbComponent },
];

मान लीजिए कि हमारे पास विभिन्न पैरामीटर्स के साथ इस कंपोनेंट पर नेविगेट करने के लिए लिंक्स हैं:

<nav>
	<a
		routerLink="/aaaa/1"
		routerLinkActive="active"
	>
		1
	</a>
	<a
		routerLink="/aaaa/2"
		routerLinkActive="active"
	>
		2
	</a>
	<a
		routerLink="/aaaa/3"
		routerLinkActive="active"
	>
		3
	</a>
</nav>

मान लीजिए कि चाइल्ड कंपोनेंट में निम्नलिखित ऐरे है:

let arr: string = [
	'a', 'b', 'c', 'd', 'e'
];

export class AaaaComponent {

}

आइए रूट पैरामीटर के मान के आधार पर ऐरे का संबंधित एलिमेंट प्राप्त करें:

export class AaaaComponent {
	constructor(private activateRoute: ActivatedRoute) {
		let params = activateRoute.snapshot.params;
		let id = params['id'];
		
		this.value = arr[id];
	}
}

प्राप्त एलिमेंट को व्यू में प्रदर्शित करें:

मान: {{ value }}

मान लीजिए कि चाइल्ड कंपोनेंट में निम्नलिखित ऑब्जेक्ट्स की ऐरे संग्रहित है:

[
	{
		name: 'user1',
		surn: 'surn1',
	},
	{
		name: 'user2',
		surn: 'surn2',
	},
	{
		name: 'user3',
		surn: 'surn3',
	},
]

एक पैरामीटर के साथ रूट बनाएं। पैरामीटर के मान के आधार पर व्यू में यूजर्स में से एक का डेटा प्रदर्शित होना चाहिए।