AngularJS: URL में क्वेरी पैरामीटर कैसे साफ़ करें?


135

मेरे AngularJS एप्लिकेशन को उपयोगकर्ता के लिंक्डइन प्रोफ़ाइल तक पहुंच की आवश्यकता है। यह करने के लिए कि मुझे उपयोगकर्ता को लिंक्डइन URL पर पुनर्निर्देशित करना होगा जिसमें एक कॉलबैक पुनर्निर्देशित_यूरी पैरामीटर होता है जो लिंक्डइन को उपयोगकर्ता को मेरे वेब पर वापस अप्रत्यक्ष करने के लिए बताएगा और URL में एक "कोड" क्वेरी परम शामिल करेगा। यह एक पारंपरिक Oauth 2.0 प्रवाह है।

सब कुछ बहुत अच्छा काम करता है सिवाय इसके कि लिंक्डइन उपयोगकर्ता को निम्नलिखित URL पर वापस भेज देता है:

http://localhost:8080/?code=XXX&state=YYY#/users/123/providers/LinkedIn/social-sites

मैं ?code=XXX&state=YYYइसे साफ करने के लिए URL से निकालना चाहूंगा । उपयोगकर्ता को लिंक्डइन रीडायरेक्ट से प्राप्त क्वेरी पैरामीटर देखने की आवश्यकता नहीं है।

मैंने कोशिश की $location.absUrl($location.path() + $location.hash()).replace(), लेकिन यह URL में क्वेरी पैरामेट्स रखता है।

मैं क्वेरी पैरामीटर, जैसे "कोड", का उपयोग करके निकालने में असमर्थ हूं ($location.search()).code। ऐसा लगता है? इससे पहले ऊपर के URL में # कोणीय को छल रहा है।

जवाबों:


151

मैं उपयोग करता हूं

$location.search('key', null)

चूंकि यह न केवल मेरी कुंजी को हटाता है, बल्कि इसे URL पर दृश्यता से हटा देता है।


2
यह क्रोम में बैक बटन लूप का कारण बनता है क्योंकि बैक बटन //example.com?key=value पर वापस चला जाता है, लेकिन //example.com की ओर कोणीय होता है। सुझाव?
जॉयब्रो

2
यह मुझे कोड इश्यू जैसा लगता है। कोणीय को कुछ भी आगे नहीं करना चाहिए, जब तक कि आपके द्वारा जोड़े गए विधि के कुछ राजा न हों। इसके अलावा, .replace () वर्तमान इतिहास प्रविष्टि को प्रतिस्थापित करता है।
जूलियस

viewModelHelper.navigateTo ( 'foo /'); फू स्ट्रिंग के लिए क्वेरी स्ट्रिंग को जारी रखा गया था, इसलिए मैंने इसे window.location.href = 'foo /' का उपयोग करके ठीक किया; बजाय।
जायब

2
खिड़की का उपयोग न करें, इसके बजाय कोणीय की $ खिड़की का उपयोग करें। यूनिट टेस्ट करना आसान हो जाएगा। अधिक: docs.angularjs.org/api/ng/service/$window
जूलियस

यदि आप एक विशिष्ट परम, धन्यवाद हटाना चाहते हैं तो यह सही काम करता है।
21

107

मुझे AngularJS फोरम से जवाब मिलना समाप्त हो गया। देखें इस सूत्र जानकारी के लिए


लिंक एक Google समूह थ्रेड के लिए है, जिसे पढ़ना मुश्किल है और एक स्पष्ट उत्तर प्रदान नहीं करता है। URL पैरामीटर का उपयोग करने के लिए

$location.url($location.path());

मुझे लगता है कि आप $ location.path के बजाय $ location.url () में पथ डालना चाहते हैं। ऊपर की तरह उन दोनों को मर्ज करने की कोशिश करना मेरे लिए काम नहीं करता है।
mbdev

1
मेरे लिए भी काम नहीं करता है। दोनों फ़ंक्शन क्वेरी परम को वहां छोड़ देते हैं।
पाब्लो एज़ेकिएल लियोन

वास्तव में उपयोगी जवाब। मेरे परिदृश्य में, हर बार पहली बार के बाद मैंने $ location.path ('/ reportmaint') को ट्रिगर किया था। खोज ({<myparams>}), यह कभी भी पिछले क्वेरी मापदंडों को साफ नहीं करता है।
17:00 बजे bob.mazzo

यह क्रोम में बैक बटन लूप का कारण बनता है क्योंकि बैक बटन //example.com?key=value पर वापस चला जाता है, लेकिन //example.com की ओर कोणीय होता है। सुझाव?
जॉयब्रो

+1 के लिएThe link is to a Google Groups thread, which is difficult to read and doesn't provide a clear answer
व्लाद

70

सभी क्वेरी पैरामीटर निकालने के लिए , यह करें:

$location.search({});

एक विशेष क्वेरी पैरामीटर निकालने के लिए , यह करें:

$location.search('myQueryParam', null);

2
कोणीय 1.5 के लिए भी काम करता है।
मनीष एम दंबलानी

1
के साथ काम करता है undefined, के मामले में आप का उपयोग करने से बच रहे हैं nullजैसे मैं हूँ।
हैंकसर्पियो

मुझे क्या पसंद नहीं है यदि आप ब्राउज़र बैक बटन के साथ वापस जाते हैं, तो आप अपने पिछले खोज पृष्ठ में मैंने पहले की गई खोज क्वेरी को ढीला कर दिया है।
गीनो

@Gino एक काम के आसपास, आप इस रीसेट से पहले ब्राउज़र इतिहास में एक रिकॉर्ड जोड़ सकते हैं। stackoverflow.com/q/10541388/586051
राहुल देसाई

@RahulDesai मैं एनजी-मार्ग का उपयोग कर रहा हूं, मैं इसे अपने आप करूंगा
Gino

29

किसी आइटम को हटाने के लिए उसे हटाएं और $ $ लिखें

    if ($location.$$search.yourKey) {
        delete $location.$$search.yourKey;
        $location.$$compose();
    }

angularjs स्रोत से प्राप्त: https://github.com/angular/angular.js/blob/c77b2bcca36cf199478b8fb651972a1f650f646b/brc/ng/location.js#L419-L443


2
प्रतिभाशाली! एक जादू की तरह काम किया।
पॉलकपर्सन

यह मेरे लिए काम करता है, लेकिन मुझे लगता है कि जूलियस का समाधान अधिक सही है, क्योंकि ऐसा लगता है कि जब वे searchविधि बनाते हैं तो कोणीय लोगों के मन में क्या था । docs.angularjs.org/api/ng/service/$location#search
zmilojko

1
धन्यवाद, यह काफी अच्छा काम किया ... दिलचस्प बात यह है कि IE8 उस URL को सेट / कंपोज़ करना पसंद करता है और फिर बाद में लोड करता है। मुझे यकीन है कि यही कारण है कि उचित मार्ग को प्राथमिकता दी जाती है और यह भी कि हम सभी बुरे लोग क्यों हैं। : पी
रोमनुलस

27

आप किसी विशिष्ट क्वेरी पैरामीटर का उपयोग करके हटा सकते हैं:

delete $location.$$search.nameOfParameter;

या आप किसी खाली वस्तु पर खोज सेट करके सभी क्वेरी को साफ़ कर सकते हैं:

$location.$$search = {};

2
मुझे पता नहीं क्यों, लेकिन यह समाधान पृष्ठों पर स्विच करते समय अच्छी तरह से काम नहीं करता है (पैरामीटर फिर से प्रकट हो सकता है, भले ही $location.$$search = {}निष्पादित हो)। @ बसरत समाधान अच्छी तरह से काम कर रहा है।
मिक 378

1
मेरे लिए ठीक काम किया - शायद उस क्रम की जांच करें जिसमें आप पैरामीटर और परिवर्तन पथ निकाल रहे हैं?
दानियक १५'१४ को १५:०२

1
हालांकि यह काम कर सकता है यह निजी चर तक पहुंचता है जिसे संशोधित नहीं किया जाना चाहिए, एक और समाधान के लिए @ जूलियस जवाब देखें
बेन टालियाडोरोस

26

लेखन के समय, और जैसा कि पहले @Bosh से उल्लेख किया है, html5modeहोना चाहिए trueक्रम सेट करने के लिए सक्षम होने के लिए में $location.search()है और यह खिड़की के दृश्य यूआरएल में वापस परिलक्षित होना है।

अधिक जानकारी के लिए https://github.com/angular/angular.js/issues/1521 देखें ।

लेकिन अगर html5mode हैtrue तो आप आसानी से साथ URL की क्वेरी स्ट्रिंग स्पष्ट कर सकते हैं:

$location.search('');

या

$location.search({});

यह विंडो के विज़ुअल URL को भी बदल देगा।

(AngularJS संस्करण में परीक्षण किया गया 1.3.0-rc.1साथ html5Mode(true)।)


12

यह काम करने की आवश्यकता है जब html5mode= false?

अन्य सभी उत्तर केवल तभी काम करते हैं जब कोणीय का html5modeहोता है true। यदि आप बाहर काम कर रहे हैं html5mode, तो $locationकेवल "नकली" स्थान को संदर्भित करता है जो आपके हैश में रहता है - और इसलिए $location.searchवास्तविक पृष्ठ के खोज पार्म्स को देख / संपादित / ठीक नहीं कर सकता है।

कोणीय भार से पहले पृष्ठ के HTML में सम्मिलित करने के लिए यहाँ एक समाधान है :

<script>
  if (window.location.search.match("code=")){
    var newHash = "/after-auth" + window.location.search;
    if (window.history.replaceState){
      window.history.replaceState( {}, "", window.location.toString().replace(window.location.search, ""));
    }
    window.location.hash = newHash;
  }
</script>

2
एक और तरीका है कि मैंने html5Mode को सही से कॉन्फ़िगर करने से परहेज किया है क्वेरी स्ट्रिंग को बनाकर ऐसा है कि इसमें # अधिकार पहले है ? । तो इसके myapp/#?client=clientName बजाय myapp/?client=clientName
एंजेल गाओ

5

महज प्रयोग करें

$location.url();

के बजाय

$location.path();

4

यदि आप किसी अन्य URL पर जाना चाहते हैं और क्वेरी पैरामीटर को केवल उपयोग करने के लिए साफ़ करें:

$location.path('/my/path').search({});

1

यदि आप मार्ग मापदंडों का उपयोग कर रहे हैं तो केवल $ मार्गप्रेम को स्पष्ट करें

$routeParams= null;

1
यह सिर्फ स्थानीय चर सेट हो जाएगा $routeParamsकरने के लिए null। वास्तव में एड्रेस बार में URL पैरामीटर को बिल्कुल भी प्रभावित नहीं करेगा।
एरिक एफ।

1

कैसे के बारे में बस स्थान हैश अशक्त करने के लिए सेटिंग

$location.hash(null);

0

यदि आप मापदंडों को तुरंत संसाधित करते हैं और फिर अगले पृष्ठ पर जाते हैं, तो आप नए स्थान के अंत में एक प्रश्न चिह्न लगा सकते हैं।

उदाहरण के लिए, यदि आपने $ स्थान किया होता। path ('/ nextPage');

आप इसके बजाय ऐसा कर सकते हैं: $ location.path ('/ nextPage?');


0

मैंने उपरोक्त उत्तरों की कोशिश की है, लेकिन उन्हें काम करने के लिए नहीं मिला। मेरे लिए काम करने वाला एकमात्र कोड था$window.location.search = ''


0

मैं इस एकल पंक्ति के साथ सभी क्वेरी मापदंडों को प्रतिस्थापित कर सकता हूं: $location.search({});
समझने में आसान और उन्हें साफ करने का आसान तरीका।


0

स्वीकृत उत्तर ने मेरे लिए काम किया, लेकिन मुझे बैक बटन के साथ समस्याओं को ठीक करने के लिए थोड़ा गहरा खुदाई करने की आवश्यकता थी।

मैंने जो देखा वह यह है कि अगर मैं किसी पृष्ठ का उपयोग करके लिंक करता हूं <a ui-sref="page({x: 1})">, तो क्वेरी स्ट्रिंग का उपयोग करके हटा दें $location.search('x', null), मुझे अपने ब्राउज़र इतिहास में अतिरिक्त प्रविष्टि नहीं मिलती है, इसलिए बैक बटन मुझे वापस वहीं ले जाता है जहां मैंने शुरू किया था। हालाँकि मुझे ऐसा लगता है कि यह गलत है क्योंकि मुझे नहीं लगता कि कोणीय को स्वतः ही मेरे लिए इस इतिहास प्रविष्टि को हटा देना चाहिए, यह वास्तव में मेरे विशेष उपयोग के मामले में वांछित व्यवहार है।

समस्या यह है कि अगर मैं का उपयोग कर पृष्ठ से लिंक है <a href="https://stackoverflow.com/page/?x=1">बजाय, तो उसी तरह से क्वेरी स्ट्रिंग निकालने के लिए, मैं कर अपने ब्राउज़र के इतिहास में एक अतिरिक्त प्रवेश मिलता है, तो मैं वापस जाएं बटन क्लिक करने के लिए है दो बार मैं कहाँ शुरू करने के लिए वापस पाने के लिए । यह असंगत व्यवहार है, लेकिन वास्तव में यह अधिक सही लगता है।

मैं आसानी hrefसे उपयोग करके लिंक के साथ समस्या को ठीक कर सकता हूं $location.search('x', null).replace(), लेकिन फिर यह पृष्ठ को तोड़ देता है जब आप एक ui-srefलिंक के माध्यम से उस पर उतरते हैं, तो यह अच्छा नहीं है।

चारों ओर बहुत सी हलचल के बाद, यह वह फिक्स है जिसके साथ मैं आया था:

मेरे ऐप के runफंक्शन में मैंने इसे जोड़ा:

$rootScope.$on('$locationChangeSuccess', function () {
    $rootScope.locationPath = $location.path();
});

फिर मैं क्वेरी स्ट्रिंग पैरामीटर को हटाने के लिए इस कोड का उपयोग करता हूं:

$location.search('x', null);

if ($location.path() === $rootScope.locationPath) {
    $location.replace();
}

0

के लिए कोणीय> 2 , आप परम आप हटाना चाहते हैं सभी के लिए अशक्त पारित कर सकते हैं

this.router.navigate(['/yourRoute'], {queryParams:{params1: null, param2: null}})
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.