कोणीय: URL द्वारा सभी रूट सेगमेंट कॉन्फ़िगरेशन को हल करें

Question

URL को देखते हुए, उदा। /path/path2/path3/123;sdf=df और एक मार्गों विन्यास:

{ path: 'path', data: { g: 'h' }, children: [ 
    { path: 'path2', data: { c: 'd' }, children: [ 
    { path: 'something', component: TestpageComponent, data: { a: 'b' } }, 
    { path: 'path3/create', component: TestpageComponent, data: { b: 'c' } }, 
    { path: 'path3/:id', component: TestpageComponent, data: { b: 'c' } }, 
    ] } 
] }, 

क्या मैं जरूरत के क्रम में सभी स्तरों पर सभी data मानकों का एक परिणाम सेट (यूआरएल के प्रत्येक खंड) प्राप्त करने के लिए सभी वर्गों के लिए एक वास्तविक विन्यास मिल रहा है।

मैं यूआरएल को सेगमेंट में विभाजित कर सकता हूं उदा।

console.log(this.router.parseUrl(url)); 

या अधिक स्पष्ट होने के

console.log(this.router.parseUrl(url).root.children['primary'].segments); 

वापस आ जाएगी जो

[{"path":"path","parameters":{}},{"path":"path2","parameters":{}},{"path":"and","parameters":{}},{"path":"123","parameters":{"sdf":"df"}}] 

तो, खंडों में यूआरएल बंटवारे एक समस्या नहीं है। हालांकि मुझे प्रत्येक सेगमेंट के लिए कॉन्फ़िगरेशन प्राप्त करने की आवश्यकता है।

मैं

console.log(this.router.config); 

मैं विन्यास पेड़ के माध्यम से घटकों के साथ जाने के लिए और शाखा की आवश्यकता पता कर सकते हैं के साथ सभी मार्गों के लिए वास्तविक विन्यास प्राप्त कर सकते हैं, लेकिन यह मुसीबतों जैसे पैदा कर सकता है को create सेगमेंट के विरुद्ध हल करते समय। तो, मैं कॉन्फ़िगरेशन को हल करने के राउटर के तरीके का उपयोग करना चाहता हूं कि यदि आंतरिक राउटर कार्यान्वयन में परिवर्तन होता है तो मुझे मेरा परिवर्तन करने की आवश्यकता नहीं होगी।

उदाहरण: कल्पना करें कि मेरे पास कुछ गार्ड द्वारा संरक्षित यूआरएल का 50% (उदा। केवल उपयोगकर्ताओं में लॉग इन किया जा सकता है) और अन्य 50% सुरक्षित नहीं है (सभी के लिए प्रदर्शित)। तो, नेविगेशन मेनू स्तर पर (router-outlet के बाहर) मैं केवल उन लिंक को प्रदर्शित करना चाहता हूं जो वर्तमान उपयोगकर्ता के लिए प्रासंगिक हैं, इसलिए मुझे यह जानना होगा कि गार्ड द्वारा कौन से मार्ग सुरक्षित हैं। गार्ड/डेटा/जो कुछ भी समस्या का एक विशेष मामला है।

उदाहरण उदाहरण के साथ चिपके रहें, मैं किसी विशेष URL के लिए कॉन्फ़िगरेशन सेट प्राप्त करने के लिए एक सामान्य तरीका खोज रहा हूं।

क्या यह किसी भी तरह से संभव है?

Answer 1

संस्करण 2.x के साथ आप recognize का उपयोग कर सकते हैं राउटर आंतरिक रूप से RouteStateSnapshot पर यूआरएल से मेल खाने के लिए उपयोग करता है।

import { recognize } from '@angular/router/src/recognize'; 

recognize(null, this.router.config, this.router.parseUrl(url), url).subscribe(route => { 
    var routeSnapshot = route.root.firstChild; 

    // Go to all children to get actual route. 
    // If you use routes with children you should have 
    // the full tree here 
    var childSnapshot = routeSnapshot.firstChild; 
    while (childSnapshot != null) { 
     childSnapshot = routeSnapshot.firstChild; 
     if (childSnapshot != null) { 
      routeSnapshot = childSnapshot; 
     } 
    } 

    let routeData = routeSnapshot.data || {}; 

    // routeData['a']... 
}); 

अफसोस की बात यह है कि यह अब संस्करण 4.x के साथ काम नहीं कर रहा है। संस्करण 4.x के लिए मैंने पहचान फ़ंक्शन का पर्दाफाश करने के लिए Router पर एक नई विधि जोड़ने के लिए एक पुल अनुरोध बनाया है।

https://github.com/angular/angular/issues/15826

एक और पक्ष टिप्पणी। .catch((rej) => { // some code if it fails to resolve route }) जोड़कर, वादे की त्रुटियों को संभालने के लिए यह समझ में आता है (या तो पहचान या नई राउटर विधि)। ऐसा हो सकता है कि यह url-> routestatesnapshot को हल करने में विफल रहता है।या तो क्योंकि यूआरएल गलत है या आप LoadChildren के माध्यम से एसिंक मार्गों का उपयोग करते हैं और मार्ग अभी तक लोड नहीं किए गए हैं। ब्रेडक्रंब एसिंक मार्गों के साथ भी इसका उपयोग करके बहुत अच्छा काम करते हैं। यदि आप अनुमतियों की जांच के लिए इसका उपयोग करते हैं, उदाहरण के लिए निर्देश के माध्यम से, यदि आप एसिंक मार्गों का उपयोग करते हैं तो आपको यह देखने की आवश्यकता है।

Answer 2

मार्गों के लिए डेटा कॉन्फ़िगरेशन प्राप्त करने का एक और तरीका है। इसमें डेटा ऑब्जेक्ट में key संपत्ति को जानना शामिल है।

अपने घटक में आप उस सटीक मार्ग के लिए डेटा

this.route.snapshot.data['key'] 

आप माता-पिता के डेटा मिल सकता है के साथ

this.route.snapshot.parent.data['key'] 

या यहां तक ​​कि के साथ दादा-दादी के डेटा के साथ प्राप्त कर सकते हैं

this.route.snapshot.parent.parent.data['key'] 

चूंकि आप अपने सभी मार्गों पर विभिन्न कुंजी का उपयोग कर रहे हैं, जिससे यह अधिक कठिन हो जाता है।

let keys = Object.keys(this.route.snapshot.data); 
keys.map(x => { 
    console.log('key', x); 
    console.log('data', this.route.snapshot.data[x]); 
} 

इसके अलावा, अगर आप अपने यूआरएल क्षेत्रों पता है कि तुम भी उस पर एक विशेष मार्ग के लिए config प्राप्त करने के लिए मिलान कर सकते हैं: उस मामले में, आप कुंजी की एक सूची प्राप्त और अधिक पुनरावृति कि पूरे करने होंगे:

let configForRoute = this.router.config.find(x => x.path === this. route.snapshot.url.toString()) 

let dataForSegment = this.router.config.find(x => x.path === 'somePath').data['key'] 

एक कच्चे समाधान सभी डेटा आप कुछ इस तरह दिखेगा की जरूरत है पाने के लिए:

obj = {}; 
getData(routeData){ 
    let keys = Object.keys(routeData); 
    keys.map(x => this.obj[x] = routeData[x]) 
} 

this.getData(this.route.snapshot.parent.parent.data); 
this.getData(this.route.snapshot.parent.data); 
this.getData(this.route.snapshot.data); 
console.log(obj); 

उम्मीद है कि इस मदद करता है सही रास्ते पर आप अपनी आवश्यकता का डेटा प्राप्त करने के लिए मिलता है।

संपादित

मैं मूल प्रश्न गलत समझा हो सकता है।

मुझे लगता है कि क्यों की आवश्यकता होगी:

के अलावा के बाद से

? कल्पना कीजिए कि मेरे पास द्वारा संरक्षित यूआरएल का 50% कुछ गार्ड है (उदाहरण के लिए केवल उपयोगकर्ता में लॉग इन किया जा सकता है) और अन्य 50% सुरक्षित नहीं है (सभी के लिए प्रदर्शित)। तो, नेविगेशन मेनू स्तर (राउटर-आउटलेट के बाहर) पर मैं केवल लिंक प्रदर्शित करना चाहता हूं जो वर्तमान उपयोगकर्ता के लिए प्रासंगिक हैं, इसलिए मुझे यह जानना होगा कि मार्ग गार्ड द्वारा संरक्षित हैं। गार्ड/डेटा/जो कुछ भी समस्या का विशेष मामला है।

तरह से मैं या लिंक्स या तो अप्रमाणित उपयोगकर्ताओं को देख सकता था छुपा लिंक अनाधिकृत उपयोगकर्ताओं को देख सकता था छुपाने का इस समस्या का समाधान मेरी प्रमाणीकरण सेवा पर एक समारोह है कि जाँच कर सकते हैं या तो एक उपयोगकर्ता प्रमाणीकृत या अधिकृत है या नहीं बनाने के लिए है। यह वही कार्य है जिसका उपयोग मेरे मार्गों पर मेरे मार्गों पर भी किया जाता है।

उदाहरण के लिए, मैं मार्ग डेटा data: { permissions:[permission1, permission2] } पर्दे के पीछे इस गार्ड उपयोगकर्ता डेटा फ़ील्ड में सूचीबद्ध अनुमतियों का उपयोग कर की अनुमति है कि क्या जांच करने के लिए प्रमाणन सेवा पर एक समारोह का उपयोग करता है के साथ मेरे मार्गों पर एक CheckPermissions गार्ड हो सकता है। मैं *ngIf="authSvc.CheckPermission(permission1) आदि के साथ अपने मुख्य मेनू में लिंक छिपाने के लिए ऑथ सेवा से उसी फ़ंक्शन का भी उपयोग कर सकता हूं। इस तरह मुझे तर्क को कहीं भी डुप्लिकेट नहीं करना है। आखिरकार एपीआई एंडपॉइंट्स को सर्वर की तरफ भी संरक्षित किया जाना चाहिए।

राउटर को एक यूआरएल देने में सक्षम होने के लिए और उस मार्ग को वापस पाने के लिए जो इसे बिना नेविगेट किए मेल खाता है, मुझे ऐसा करने के लिए एक दस्तावेज तरीका नहीं मिल रहा है। उम्मीद है कि यह कम से कम मदद की है।