Angular 2 रूट बदलने पर ऊपर स्क्रॉल करें: शुरुआती लोगों के लिए समाधान

Angular 2 रूट बदलने पर ऊपर स्क्रॉल करें: यह क्यों महत्वपूर्ण है और इसे कैसे लागू करें

कल्पना करें कि आप दस्तावेज़ीकरण वाले एक लंबे पृष्ठ को स्क्रॉल कर रहे हैं, बीच में पहुँचते हैं, एक लिंक पर क्लिक करते हैं — और आप एक नए अनुभाग के निचले भाग में पहुँच जाते हैं। परिचित लगता है? यही समस्या Angular 2 scroll to top on route change तंत्र हल करता है। इसके बिना, उपयोगकर्ता अनुभव प्रभावित होता है: माउस व्हील को मैन्युअल रूप से घुमाना या Home दबाना पड़ता है, जो कष्टप्रद है और बाउंस दर बढ़ाता है।

इस लेख में, हम समझेंगे कि रूट के बीच प्रत्येक संक्रमण पर Angular को स्वचालित रूप से पृष्ठ को ऊपर कैसे स्क्रॉल कराया जाए। आप न केवल एक तैयार समाधान सीखेंगे, बल्कि यह भी समझेंगे कि यह इस तरह से क्यों काम करता है। यह लेख शुरुआती लोगों के लिए लिखा गया है, लेकिन अनुभवी डेवलपर्स के लिए भी उपयोगी होगा जो अपने ज्ञान को ताज़ा करना चाहते हैं।

Angular यह "बॉक्स से बाहर" क्यों नहीं करता?

Angular एक शक्तिशाली SPA फ्रेमवर्क है, लेकिन नेविगेशन के दौरान इसका व्यवहार आश्चर्यजनक हो सकता है। डिफ़ॉल्ट रूप से, रूट बदलने पर ब्राउज़र स्क्रॉल स्थिति को रीसेट नहीं करता। क्यों? क्योंकि Angular Router संक्रमण को <router-outlet> में घटक के प्रतिस्थापन के रूप में मानता है, न कि नए पृष्ठ के लोड होने के रूप में। ब्राउज़र सोचता है: "मैं अभी भी उसी दस्तावेज़ पर हूँ, मुझे स्क्रॉल क्यों करना चाहिए?"।

यह विशेष रूप से तब ध्यान देने योग्य होता है जब आपके पास लंबी सूचियाँ, तालिकाएँ या दस्तावेज़ीकरण हो। उपयोगकर्ता पृष्ठ के निचले भाग में एक लिंक पर क्लिक करता है — और नई सामग्री खुलती है, लेकिन स्क्रॉल नीचे ही रहता है। इस समस्या का समाधान Angular को स्पष्ट रूप से बताना है: "अरे, प्रत्येक संक्रमण पर ऊपर स्क्रॉल करो!"।

समाधान के दो दृष्टिकोण

Angular 2+ में scroll to top on route change लागू करने के दो मुख्य तरीके हैं:

\n
• AppComponent में ग्लोबल हैंडलर — सरल, लेकिन नेस्टेड रूट के साथ हमेशा सही ढंग से काम नहीं करता।
\n
• Route Config का उपयोग — अधिक लचीला, प्रत्येक रूट के लिए अलग-अलग व्यवहार कॉन्फ़िगर करने की अनुमति देता है।
\n

हम दोनों पर विचार करेंगे, लेकिन मैं दूसरे पर ध्यान केंद्रित करने की सलाह देता हूँ — यह अधिक नियंत्रण देता है।

तरीका 1: सरल ग्लोबल हैंडलर (त्वरित शुरुआत के लिए)

अपना app.component.ts (या रूट कंपोनेंट) खोलें और Router इवेंट्स की सदस्यता जोड़ें। TypeScript में कोड:

\nimport { Component, OnInit } from '@angular/core';\nimport { Router, NavigationEnd } from '@angular/router';\nimport { filter } from 'rxjs/operators';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css']\n})\nexport class AppComponent implements OnInit {\n  constructor(private router: Router) {}\n\n  ngOnInit() {\n    this.router.events.pipe(\n      filter(event => event instanceof NavigationEnd)\n    ).subscribe(() => {\n      window.scrollTo(0, 0);\n    });\n  }\n}\n

यहाँ हम राउटर इवेंट्स की सदस्यता लेते हैं, केवल NavigationEnd (वह क्षण जब संक्रमण पूरा होता है) को फ़िल्टर करते हैं, और window.scrollTo(0, 0) कॉल करते हैं। सरल, लेकिन एक बारीकी है: यदि आपके पास नेस्टेड रूट हैं (उदाहरण के लिए, कंपोनेंट के अंदर चाइल्ड रूट), तो यह कोड बहुत जल्दी या बिल्कुल भी काम नहीं कर सकता है।

तरीका 2: Route Config का उपयोग करके सही समाधान (अनुशंसित)

यह दृष्टिकोण Angular Router में अंतर्निहित scrollPositionRestoration विकल्प का उपयोग करता है। Angular 6.1 से शुरू करके, रूटिंग कॉन्फ़िगरेशन में सीधे स्वचालित स्क्रॉल रिस्टोरेशन/रीसेट सेट करना संभव हो गया।

अपना app-routing.module.ts खोलें और RouterModule.forRoot() में scrollPositionRestoration: 'top' विकल्प जोड़ें:

\nimport { NgModule } from '@angular/core';\nimport { RouterModule, Routes } from '@angular/router';\n\nconst routes: Routes = [\n  { path: '', component: HomeComponent },\n  { path: 'about', component: AboutComponent },\n  { path: 'contact', component: ContactComponent }\n];\n\n@NgMod