क्रॉस-प्लेटफ़ॉर्म नेविगेशन: क्यों नवकंट्रोलर ने आयोनिक 4 में कोणीय / राउटर को हराया

सभी को नमस्कार! मेरा नाम निकिता ज़िगामोव्स्की है, जो कि किटएप में एक प्रोग्रामर है , और मैं आयनिक 4 में नेविगेशन के निर्माण में अपने अनुभव के बारे में बात करना चाहता हूं: जिस समस्या का मैंने सामना किया और उसका समाधान किया।

मैं 2018 से मोबाइल एप्लिकेशन के लिए क्रॉस-प्लेटफॉर्म समाधान विकसित कर रहा हूं। मैं आयोनिक 3 संस्करण पर काम करता था, लेकिन, जैसे-जैसे समय आगे बढ़ रहा है, कार्यक्षमता विकसित हो रही है, मैंने एक नए संस्करण में स्विच करने का फैसला किया, और आयनिक 4 में पिछले मॉडल के कष्टप्रद क्षण और कीड़े पहले से ही तय हो गए लगते हैं ।

ऐसा लगता है कि क्या गलत हो सकता है। अंत में, हमारे पास एक सामान्य कोणीय मार्ग की कार्यक्षमता है, न कि सभी कमियों के साथ पुराने NavController। यहां तक ​​कि आधिकारिक आयोनिक वेबसाइट पर, राउटिंग गाइड इंगित करता है कि पृष्ठों के माध्यम से प्रोग्रामेटिक रूप से नेविगेट करना कोणीय / राउटर विधियों का उपयोग करने के लायक है। लेकिन कुछ ऐसा था जिसने मुझे पुराने नवसंवत्सर पर वापस जाने के लिए मजबूर कर दिया।

समस्या का सार

एक दिलचस्प बग देखा गया था। मान लीजिए कि आपके पास एक साइड मेनू है, तो आपने इसे आयन-स्प्लिट-पेन का उपयोग करके बनाया। आपके पास मेनू से अलग पृष्ठ भी हैं, और आप उनसे अन्य पृष्ठों पर जाना चाहते हैं जो मेनू में हैं। Router.navigateByUrl ('/ मेनू / ...') का उपयोग करके नेविगेट करें। अगला, हम मेनू पेज ए कहते हैं, और पृष्ठ मेनू से अलग होता है - बी। लेकिन एक ही है !

मान लीजिए, पृष्ठ A पर, ngOnInit इवेंट में एक निश्चित तर्क को ट्रिगर किया गया है। आप राउटर का उपयोग करके पेज बी पर जाते हैं और ध्यान देते हैं कि मेनू पेज अभी भी सक्रिय है - इसे हटाया नहीं गया है। तदनुसार, यदि आप पृष्ठ A पर वापस जाते हैं, तो ngOnInit ईवेंट कार्य नहीं करेगा, क्योंकि इस पृष्ठ का ngOnDestroy ईवेंट काम नहीं करता था। ऐसा लगता है कि सब कुछ तार्किक है। ऐसे क्षणों में, आमतौर पर जीवन चक्र के तरीकों में से एक का सहारा लेना अब कोणीय नहीं है, लेकिन एक आयनिक - आयनव्यूविलइंटर। जब आप पृष्ठ पर जाते हैं तो यह सक्रिय हो जाता है। सब कुछ ठीक लग रहा है, यह पूरी तरह से फिट बैठता है, लेकिन एक निश्चित संख्या में परंपराएं हैं।

पेज ए पर पर्याप्त कार्रवाई के लिए कोई भी विकल्प उसके पास जाने पर काम नहीं करेगा, यदि यह संक्रमण उन पृष्ठों से नहीं है जो मेनू में हैं। आप इस पृष्ठ पर संक्रमण को ट्रैक नहीं कर पाएंगे, क्योंकि, मैं दोहराता हूं, यह अभी भी खुला है और चुपचाप अन्य पृष्ठों के तहत कार्य करता है, उदाहरण के लिए, पृष्ठ बी के तहत।

कुछ उदाहरण हैं:

यदि आपके पास निम्न पृष्ठ संरचना है, तो ionViewWillter काम करेगा:

1) अलग पेज

- पेज 1
- पेज 2
- पेज 3

इस उदाहरण में, जब मैं प्रत्येक पृष्ठ पर जाता हूं, तो आयन व्यूविल पूरी तरह से काम करेगा। (पेज 1 => पेज 2, पेज 2 => पेज 3, आदि)

2) मेनू / टैब

- मेनू
- मेनूपेज 1
- मेनूपेज 2
- मेनूपेज 3
इस उदाहरण में, सबकुछ ठीक भी हो जाएगा: आयन व्यूविल्‍टर विधि हर बार जब आप किसी भी पेज (menuPage1 => menuPage2, menuPage1 => menuPage3, आदि) में जाएंगे।

लेकिन नीचे दिए गए उदाहरण में, सब कुछ अधिक जटिल है:

- मेनू
- मेनूपेज 1
- मेनूपेज 2
- मेनूपेज 3
- लॉगिनपेज
- साइनअपपेज

यह वह जगह है जहाँ मानक कोणीय मार्ग की समस्याएं शुरू होती हैं। मेनू पेजों के अंदर नेविगेट करते समय (menuPage1 => menuPage2 => menuPage3) - ionViewWillEnter विधि हमेशा की तरह काम करेगी, उसी तरह जब व्यक्तिगत पृष्ठों (loginPage = साइनअपपेज) के बीच नेविगेट करते हैं। लेकिन जैसे ही हम अलग-अलग पेज और मेनू पेज (loginPage => menu / menuPage1 या menu / menuPage3 => signupPage) के बीच चलना शुरू करते हैं, न तो ngOnInit मेथड और न ही ionViewWillter काम करता है। ngOnInit काम नहीं करेगा क्योंकि पृष्ठ नष्ट नहीं हुआ है, जो तार्किक है। लेकिन क्यों नहीं ionViewWillEnter काम नहीं किया?

प्रलेखन के आधार पर, आयन व्यूविलर अलग-अलग रूटिंग स्टैक (कीवर्ड "व्यक्तिगत") या अलग-अलग पृष्ठों के बीच, या मेनू / टैब के अंदर काम करता है। लेकिन अलग-अलग पृष्ठों और मेनू / टैब की मिश्रित संरचना में नहीं। अजीब है, लेकिन यह सामान्य व्यवहार माना जाता है। उसी समय, यह बिल्कुल ऐसा व्यवहार नहीं है जो उपयोगकर्ता अपेक्षा करते हैं, खासकर जब आप जीवन चक्र हुक के नाम पर विचार करते हैं :)।

तो इस समस्या को कैसे हल करें?

कई मंचों का दौरा किया, लेकिन एक सामान्य समाधान नहीं देखा है, और कुछ संदिग्ध जीवन हैक देखा है कि हमेशा काम नहीं करते, यह स्पष्ट हो जाता है कि कुछ और की जरूरत है। ऐसा कुछ जो किसी भी प्रकार के पृष्ठों के बीच संक्रमण की कार्यक्षमता को बदल देगा।

इस मामले में क्या करना है? बेशक, राउटर को नरक में फेंक दो और इसके बारे में भूल जाओ, क्योंकि अभी भी हमारी पहले से नफरत है और अब बहुत अच्छा है नवकंट्रोलर।

NavController.navigateRoot () विधि के बीच मुख्य अंतर यह है कि किसी अन्य पृष्ठ पर जाने के बाद, पिछला स्वचालित रूप से नष्ट हो जाता है! और जब आप इसे फिर से स्विच करते हैं, तो ngOnInit विधि और ionViewWillEnter दोनों काम करेंगे! वास्तव में - यह सही समाधान है - बिना बैसाखी और संदिग्ध स्व-लिखित कार्यों के।

सबसे अच्छी बात यह है कि यह किसी भी पृष्ठ संरचना के साथ काम करता है: यहां तक ​​कि सामान्य के बीच, यहां तक ​​कि मेनू के अंदर, यहां तक ​​कि मिश्रित प्रकार, पिछले उदाहरण से।

सकारात्मक पहलुओं को सारांशित करें:

1. NavController, स्टैक से क्रमशः पिछले पृष्ठ को हटाता है, जब आप इसे वापस जाते हैं - यह अद्यतन किया जाता है, आयन व्यूविलइंटर और ngOnInit तरीके काम करते हैं, और आप उन में तर्क को फिर से कॉल कर सकते हैं और उदाहरण के लिए, पृष्ठों पर जानकारी अपडेट कर सकते हैं।
2. पुराने पुश (), सेटरूट (), और पॉप () विधियों को भूल जाओ, साथ ही साथ कक्षा तत्वों के माध्यम से नेविगेट करना। आखिरकार, इसने बहुत सारी समस्याएं पैदा कीं। अब navCtrl में अपडेटेड मेथड्स हैं, जो राउटर के तरीकों की तरह ही पास किए जाते हैं।

वहाँ एक चेतावनी है, जहां बिना "BUT" :)

अगर हम एंड्रॉइड पर हार्डवेयर "बैक" बटन के लिए एक इवेंट हैंडलर जोड़ते हैं और इस हैंडलर में हम राउटर या नेकांट्रॉलर का उपयोग करके कहीं जाने की कोशिश करते हैं, तो हमें कंसोल में निम्नलिखित त्रुटि मिलती है: 'कोणीय क्षेत्र के बाहर नेविगेशन ट्रिगर'।

हां, नेविगेशन काम करेगा, पेज खुल जाएगा, लेकिन इस पर कुछ भी काम नहीं करेगा - न तो गुणों का आरंभीकरण, न ही जीवन चक्र के तरीके। दुर्भाग्य से, बैक बटन दबाने से नेविगेशन को कोणीय क्षेत्र के बाहर ट्रिगर किया जाता है और, वास्तव में, केवल टेम्पलेट को खोलता है: टेम्पलेट के लिए बाध्यकारी चर के बिना, फ़ंक्शन, हुक, जीवन चक्र विधियों के बिना - बिना कुछ भी।

समाधान वास्तव में बहुत सरल है। हम केवल स्पष्ट रूप से कोणीय क्षेत्र के अंदर नेविगेशन को मजबूर करते हैं।

एक उदाहरण:

import { Component, NgZone } from '@angular/core'; import { NavController } from '@ionic/angular'; @Component({ selector: 'app-root', templateUrl: 'app.component.html' }) export class AppComponent { constructor(private navCtrl: NavController, private ngZone: NgZone){} this.ngZone.run(() => this.navCtrl.navigateForward('menu')).then();  this.ngZone.run(() => this.router.navigateByUrl('/menu/my-orders')).then(); } 

और अब सब कुछ ठीक काम करता है!

NgZone के बारे में कई दिलचस्प लेख हैं, मैं आपको पढ़ने के लिए सलाह देता हूं। अ छा!

NavController के तरीकों के बारे में थोड़ी जानकारी:

• this.navCtrl.setDirection ('root') - स्टैक पर रूट पेज सेट करता है, पिछले सभी को हटाता है।
• this.navCtrl.navigateRoot ('homePage') - navCtrl.setDirection ('root') + रूटर.navigateByUrl ('HomePage') के समान, लेकिन स्टैक पर पिछले पृष्ठ के अनिवार्य हटाने के साथ (जो हमें चाहिए)।
• this.navCtrl.navigateForward ('examplePage') - रूटर के समान ।navigateByUrl ('/ examplePage), लेकिन इस बात के एक स्पष्ट संकेत के साथ कि कहाँ जाना है + स्टैक पर पिछले पृष्ठ को हटा सकते हैं।
• this.navCtrl.back () - location.back () के समान, लेकिन एनीमेशन के साथ।
• this.navCtrl.navigateBack ('backPage') - navCtrl.setDirection ('बैक') + राउटर .navigateByUrl ('बैकपेज') के समान।

मान लीजिए कि अब हम मेनू / पृष्ठ 1 पर हैं,



और हमारे पास एक अलग मेन्यू स्टैक है और, मेन्यू / पेज 1 से लॉगिन पेज पर जाने के बाद, हमें मेनू / पेज 1 पेज को डिलीट करने की आवश्यकता है, ताकि इसे फिर से स्विच करने के बाद, हमारे पास ngOnInit या ionViewWebEnter पर काम करने वाले कुछ प्रकार के तर्क होंगे। यदि हम संक्रमण के लिए राऊटर .navigateByUrl ('लॉगिन) का उपयोग करते हैं, तो इसके बाद हम लॉगिन पृष्ठ पर होंगे, लेकिन हमारे पास एक मेनू पृष्ठ भी होगा,



तदनुसार, लॉगिन से मेनू / पृष्ठ 1 पर स्विच करने के बाद, न तो ngOnInit और न ही ionViewWillEnter काम करेगा।

यदि आप नेविगेट करने के लिए हमारे navCtrl.navigateRoot ('लॉगिन') का उपयोग करते हैं, तो लॉगिन पृष्ठ खोलने के बाद, पिछला पृष्ठ हटा दिया जाता है। और ngOnInit और ionViewWillEnter तरीके काम करेंगे।



यह नौकंट्रोलर का उपयोग करने की सुंदरता है - अपेक्षित व्यवहार वर्तमान के अनुरूप है ।