2017-02-23 17 views
6

Angular2 में जड़ घटक के लिए एक हल को लागू करने के रूप में निम्नानुसार हम Resolve उपयोग कर सकते हैं? शायद जब वेबसाइट पहली बार लोड हो जाती है, कोई फर्क नहीं पड़ता कौन सा पृष्ठ पहले लोड किया गया है, मुझे हमेशा उपयोगकर्ता डेटा पहले प्राप्त करना होगा (उदाहरण के लिए)। तो मैं इस संकल्प को मार्गों के पदानुक्रम को कम कैसे कर सकता हूं?Angular2

+0

शायद आप http://stackoverflow.com/questions/37611549/how-to-pass-parameters-rendered-from-backend-to-angular2-bootstrap-method जैसे कुछ चाहते हैं AngularFrance ने कहा, एक रिज़ॉल्यूवर केवल हो सकता है राउटर द्वारा जोड़े गए घटकों के लिए उपयोग किया जाता है, जो मार्ग घटक नहीं है। –

+0

शायद आप APP_INITIALIZER https: // हैकर्नून का उपयोग कर सकते हैं।कॉम/हुक-इन-कोणीय-प्रारंभिक-प्रक्रिया-add41a6b7e – Michael

उत्तर

2

मैं एक ही चीज़ के बारे में सोच रहा हूं।

बाहर कर देता है कि अगर साइट के लिए प्रारंभिक अनुरोध एक रास्ता है जो उसके घटकों एक संकल्प द्वारा सुरक्षित में से एक है के लिए है, संकल्प ट्री के किसी भी घटक से पहले चलेंगे instantiated है। AppComponent सहित।

अब समस्या यह है कि AppComponent स्वयं एक रूट घटक नहीं है और इस तरह यह हल किए गए डेटा तक नहीं पहुंच सकता है। शायद आप ActivatedRoute को AppComponent में इंजेक्ट कर सकते हैं और वर्तमान मार्ग के children के माध्यम से डेटा तक पहुंच सकते हैं लेकिन यह हैक लगता है।

क्या मैं आम तौर पर करते हैं एक संकल्प की स्थापना की है (या CanActivate गार्ड) मेरी मार्ग पदानुक्रम की जड़ में है कि प्रारंभिक डेटा प्राप्त करने का। डेटा को स्वयं सेवा द्वारा वापस कर दिया जाता है और ReplaySubject के अंदर लपेटा जाता है। यह गारंटी देता है कि 1) डेटा सभी ग्राहकों के बीच साझा किया जाएगा; 2) डेटा लाने वाला कोड केवल एक बार निष्पादित किया जाएगा।

दूसरे शब्दों में:

  • मैं एक नमूदार का उपयोग एक बार async डेटा लाने के लिए और सभी मेरे एप्लिकेशन के कुछ हिस्सों में यह जरूरत है कि बीच साझा करें।
  • मैं रूट सिस्टम पर निर्भर करता हूं ताकि ऐप लाइफसाइक्ल में जितनी जल्दी संभव हो सके निष्पादन को ट्रिगर किया जा सके।

(लेकिन मैं मार्ग प्रणाली का उपयोग कर रहा नहीं डेटा लाने के लिए और साझा करें।)

अद्यतन टिप्पणियों का जवाब देने में:

आप के लिए एक डमी माता पिता मार्ग शुरू करने की है गार्ड का समर्थन है, उदाहरण के लिए:

const routes: Routes = [ 
    { 
    path: '', // This is the "root route" 
    component: PageShellComponent, 
    canActivate: [AuthGuard], 
    children: [ 
     { path: 'home', component: PageHomeComponent }, 
     { path: 'inbox', component: PageInboxComponent }, 
     { path: 'settings', component: PageSettingsComponent } 
    ] 
    }, 
]; 

माता पिता मार्ग और उसके गार्ड AuthGuard "मेरे मार्ग पदानुक्रम की जड़" सभी चिल के लिए मार डाला जाता है आवेदन में डी मार्ग। जैसा कि आप देख सकते हैं, मूल मार्ग में एक खाली पथ है और PageShellComponent के टेम्पलेट में केवल <router-outlet></router-outlet> है। इस मार्ग का एकमात्र उद्देश्य गार्ड (ओं) का समर्थन करना है।

मुझे यह जोड़ना चाहिए कि यह बहुत मूर्खतापूर्ण महसूस नहीं करता है और मुझे यकीन नहीं है कि यह जाने का सबसे अच्छा तरीका है।

+0

यह एक कामकाजी समाधान की तरह लगता है। हालांकि, मुझे नहीं लगता कि "मेरे मार्ग पदानुक्रम की जड़ पर" कहां है। मान लें कि मेरे पास '/ home' और'/contact' है, मेरे पास "रूट" रूट नहीं है, जो '/ home' और'/contact' दोनों पर ट्रिगर किया गया है। क्या आप एक उदाहरण प्रदान कर सकते हैं? – Nicky

+0

@AngularChef कृपया दिखाएं कि आपने अपने मार्ग पदानुक्रम की जड़ पर "रिज़ॉल्वर/गार्ड" कहां स्थापित किया है। धन्यवाद! –

+0

उत्तर अद्यतन :) – AngularChef