कोणीय 2 राउटर (एक स्पेस के स्थान पर एक + चिह्न का उपयोग करके) यूआरएल के लिए कस्टम एन्कोडिंग

Question

मैं एक खोज अनुप्रयोग के लिए यूआरएल में क्वेरी पैराम अपडेट करने के लिए एक कोणीय 2 राउटर का उपयोग कर रहा हूं। मैं + संकेतों के साथ एक क्वेरी में रिक्त स्थान को प्रतिस्थापित करने का प्रयास कर रहा हूं। हालांकि, + अंक एन्कोड हो रहे हैं। उदाहरण के लिए:

this.router.navigatebyUrl('?q=one+two'); 

"? Q = one% 2btwo" के साथ यूआरएल पॉप्युलेट करता है।

कोणीय 2 के लिए स्रोत कोड को देखने में, ऐसा लगता है कि राउटर यूआरएल को यूआरएलटी which uses encodeURIComponent() to encode the url में परिवर्तित करता है। इस वजह से, डिफ़ॉल्ट एन्कोडिंग को रोकना असंभव है।

मेरे वर्तमान प्रक्रिया है कि मैं navigateByUrl कर जैसा कि ऊपर देखा द्वारा मार्ग बदलने के लिए, और उसके बाद से हुए परिवर्तनों पर ध्यान है:

this.routeSubscription = this.route.queryParams.subscribe((params: any) => { 
    this.term = (params.q ? params.q : ''); 
}); 

वहाँ क्वेरी पैरामीटर है कि मुझे का उपयोग करने की अनुमति होगी से निपटने के लिए एक वैकल्पिक तरीका है यूआरएल एन्कोडिंग के लिए मेरी अपनी रणनीति?

Answer 1

मैं अपनी समस्या का हल ढूंढने में सक्षम था। आप UrlSerializer कक्षा को लागू करके अपना कस्टम यूआरएल सीरियलाइज़र बना सकते हैं।

कस्टम यूआरएल Serializer

इस तरह एक कस्टम यूआरएल serializer बनाएँ:

class CustomUrlSerializer implements UrlSerializer { 
    parse(url: string): UrlTree { 
     // Custom code here 
    } 

    serialize(tree: UrlTree): string { 
     // Custom code here 
    } 
} 

उसके बाद, आप सिर्फ UrlSerializer, जो आप AppModule में जगह कर सकते हैं के स्थान पर CustomUrlSerializer प्रदान करने की आवश्यकता दोनों धारावाहिक आयात करने के बाद प्रदाता सरणी।

providers: [ 
    { provide: UrlSerializer, useClass: CustomUrlSerializer }, 
    ... 
] 

अब, जब आप router.navigate या router.navigateByUrl कहते हैं, यह अपने कस्टम serializer पार्स करने और serializing के लिए प्रयोग करेंगे।

रिक्त स्थान

रूप + संकेत का प्रयोग रिक्त स्थान के रूप में + संकेत पार्स करने के लिए:

parse(url: string): UrlTree { 
    // Change plus signs to encoded spaces 
    url = url.replace(/\+/g, '%20'); 
    // Use the default serializer that you can import to just do the 
    // default parsing now that you have fixed the url. 
    return this.defaultUrlSerializer.parse(url) 
} 

और serializing के लिए:

serialize(tree: UrlTree): string { 
    // Use the default serializer to create a url and replace any spaces with + signs 
    return this.defaultSerializer.serialize(tree).replace(/%20/g, '+'); 
} 

DefaultUrlSerializer