कोणीय 2 में फिर से लोड किए बिना रूट पैरामेट्स बदलें

Question

मैं एंगुलर 2, गूगल मैप्स इत्यादि का उपयोग करके एक रियल एस्टेट वेबसाइट बना रहा हूं और जब कोई उपयोगकर्ता मैप के केंद्र को बदलता है तो मैं एपीआई की खोज करता हूं जो मैप की वर्तमान स्थिति के साथ-साथ त्रिज्या का संकेत देता है। बात यह है, मैं पूरे पृष्ठ को पुनः लोड किए बिना url में उन मूल्यों को प्रतिबिंबित करना चाहता हूं। क्या यह संभव है? मुझे AngularJS 1.x के उपयोग से कुछ समाधान मिले हैं लेकिन Angular 2 के बारे में कुछ भी नहीं है।

Comments

मुझे लगता है कि अगर आप [राऊटरलिंक] = "" / 'मार्ग', {param1: value1}] का उपयोग करते हैं, तो यह पृष्ठ को पुनः लोड नहीं करेगा

— टूलकिट

लेकिन मैं एक और क्वेरी पैरामीटर कैसे जोड़ सकता हूं?

— टूलकिट

☝️ यह एक पेज पुनः लोड करने का कारण होगा

— LifterCoder

बस एक ध्यान दें कि यदि आप अपनी साइट को एसईओ बनाने के लिए SSR का उपयोग करते हैं, तो यह एक समस्या है।

— जोनाथन

@ जोनाथन, यह है? चूँकि स्टैटिक पेज रेंडर होने के बाद कोणीय को राउटिंग पर ले जाता है, मुझे लगता है कि SSR का उपयोग करते समय यह अभी भी एक वैध प्रश्न है।

— adam0101

Answer 1

आप उपयोग कर सकते हैं location.go(url)जो मूल रूप से आपके यूआरएल को बदल देगा, आवेदन के मार्ग में परिवर्तन के बिना।

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

संबंधित प्रश्न जो वर्णन करताहै कि परिवर्तन होने के लिएlocation.goअंतरंग नहींRouterहोगा।

Comments

मेरे मार्ग में 'खोज' नाम का एक पैरामीटर है, जिसमें खोज फ़ील्ड का क्रमबद्ध संस्करण प्राप्त होता है, जब पहली बार लिस्टिंग स्थिति लोड होती है, तो मैं केवल इन मापदंडों का उपयोग करके इसे पढ़ता हूं ।_routeParams.get ('खोज'), फ़िल्टर को पुन: व्यवस्थित करें। और खोज करें। यदि उपयोगकर्ता खोज फ़ील्ड बदलता है, तो या तो मानचित्र या खोज पहलुओं का उपयोग करके, मैं सिर्फ राउटर var इंस्ट्रक्शन = this._router.generate (['लिस्टिंग', {खोज: serialized फील्ड्स)] की विधि उत्पन्न करके सही url का निर्माण करता हूं। ) और फिर इस ._location.go (अनुदेश.urlPath) का उपयोग करके राज्य को पुनः लोड किए बिना url को बदलने के लिए।

— मार्कोस बसुआल्डो

अगर कोई और सोच रहा है: 'angular2 / platform / common' से {स्थान} आयात करें;

— केसरियन

import { Location } from '@angular/common';कोणीय 4 में

— तहसीलियन

क्या आपने निर्माण कार्य जैसेconstructor(private location: Location){ }

— पंकज पारकर

@ एड्रियन समस्या सबसे अधिक संभव है कि आपने टाइप किया है location.go()जबकि आपको टाइप करना चाहिए था this.location.go()। जब आप उत्सर्जन करते हैं this., तो आप टाइपस्क्रिप्ट के स्थान-इंटरफ़ेस को कॉल करते हैं।

— जॉर्ज-अन

Answer 2

RC6 के रूप में आप निम्न परिवर्तन राज्य के बिना URL बदलने के लिए कर सकते हैं और इस तरह अपने मार्ग के इतिहास को बनाए रख सकते हैं

import {OnInit} from '@angular/core';

import {Location} from '@angular/common'; 
// If you dont import this angular will import the wrong "Location"

@Component({
  selector: 'example-component',
  templateUrl: 'xxx.html'
})
export class ExampleComponent implements OnInit
{
  constructor( private location: Location )
  {}

  ngOnInit()
  {    
    this.location.replaceState("/some/newstate/");
  }
}

Comments

यह मेरे लिए काम नहीं करता है। यह साइटल रूट को लोड करने की कोशिश करता है। सांत्वना त्रुटि:Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'some/newstate'

— Inigo

@Golfadas द्वारा सुझाए गए यूआरएल निर्माण के साथ इसे मिलाएं और हमारे पास एक विजेता है!

— क्रिवाग्नम

Answer 3

उपयोग करना location.go(url)जाने का तरीका है, लेकिन url को हार्डकोड करने के बजाय, इसका उपयोग करने पर विचार करें router.createUrlTree()।

यह देखते हुए कि आप निम्नलिखित राउटर कॉल करना चाहते हैं: this.router.navigate([{param: 1}], {relativeTo: this.activatedRoute})लेकिन घटक को फिर से लोड किए बिना, इसे फिर से लिखा जा सकता है:

const url = this.router.createUrlTree([], {relativeTo: this.activatedRoute, queryParams: {param: 1}}).toString()

 this.location.go(url);

Comments

इस जवाब ने मेरी समस्या हल कर दी। एक सवाल, ऊपर दिए गए यूआरएल में ""; (अर्धविराम) द्वारा परिसीमन किए गए पैरामीटर हैं। "&" के साथ क्वेरी में प्रत्येक पैरामीटर को अलग करने के लिए हमें क्या करना चाहिए?

— अमरनाथ

यह createUrlTree की घोषणा है (कमांड: कोई [], नेविगेशनईएक्सट्रैस ?: नेविगेशनएक्स्ट्रा)। आपको नेविगेशनपार्ट्स में स्थित क्वेरीपैराम का उपयोग करना होगा, कमोड नहीं। createUrlTree ([], {relativeTo: this.activatedRoute, queryParams: {परम: 1}})

— किट

सिर्फ @kit ने क्या कहा, इस पर स्पष्ट करने के लिए:this.router.createUrlTree([], {relativeTo: this.activatedRoute, queryParams: {param: 1}}).toString()

— ब्लू ग्राउंड्स

Answer 4

मेरे जैसे किसी के लिए भी इस सवाल का पता लगाना निम्नलिखित उपयोगी हो सकता है।

मुझे इसी तरह की समस्या थी और शुरू में स्थान.आग और स्थान का उपयोग करने की कोशिश की गई थी। यहाँ दिए गए अन्य उत्तरों के अनुसार सुझाव दें। हालाँकि, मुझे तब समस्याएँ हुईं जब मुझे ऐप पर किसी अन्य पेज पर जाना पड़ा क्योंकि नेविगेशन वर्तमान रूट के सापेक्ष था और वर्तमान रूट को location.go या location.replaceState द्वारा अपडेट नहीं किया जा रहा था (राउटर को कुछ भी पता नहीं है URL के बारे में ये क्या करते हैं)

संक्षेप में मुझे एक समाधान की आवश्यकता थी कि मार्ग पैरामीटर बदल जाने पर DIDN'T पृष्ठ / घटक को पुनः लोड न करे लेकिन DID मार्ग को आंतरिक रूप से अद्यतन करता है।

मैं क्वेरी मापदंडों का उपयोग कर समाप्त हुआ। आप इसके बारे में और जानकारी यहाँ पा सकते हैं: https://angular-2-training-book.rangle.io/handout/rout/query_params.html

इसलिए यदि आपको ऑर्डर सेव करने जैसा कुछ करना है और ऑर्डर आईडी प्राप्त करना है तो आप नीचे दिखाए गए पेज की तरह अपना पेज यूआरएल अपडेट कर सकते हैं। एक मानचित्र पर एक केंद्र स्थान और संबंधित डेटा को अपडेट करना समान होगा

// let's say we're saving an order. Initally the URL is just blah/orders
save(orderId) {
    // [Here we would call back-end to save the order in the database]

    this.router.navigate(['orders'], { queryParams: { id: orderId } });
    // now the URL is blah/orders?id:1234. We don't reload the orders
    // page or component so get desired behaviour of not seeing any 
    // flickers or resetting the page.
}

और आप इसे ngOnInit पद्धति की तरह ट्रैक करते हैं:

ngOnInit() {
    this.orderId = this.route
        .queryParamMap
        .map(params => params.get('id') || null);
    // orderID is up-to-date with what is saved in database now, or if
    // nothing is saved and hence no id query paramter the orderId variable
    // is simply null.
    // [You can load the order here from its ID if this suits your design]
}

यदि आप एक नए (बिना सहेजे हुए) ऑर्डर के साथ ऑर्डर पेज पर जा सकते हैं, तो आप निम्न कार्य कर सकते हैं:

this.router.navigate(['orders']);

या यदि आपको मौजूदा (सहेजे गए) ऑर्डर के लिए ऑर्डर पेज पर सीधे जाना है तो आप कर सकते हैं:

this.router.navigate(['orders'], { queryParams: { id: '1234' } });

Answer 5

मुझे यह बड़ी परेशानी थी कि मुझे कोणीय 2 के आरसीएक्स रिलीज में काम करना पड़ा। स्थान पैकेज स्थानांतरित हो गया है, और चल रहा है। () निर्माणकर्ता () के अंदर काम नहीं करेगा। यह ngOnInit () या बाद में जीवनचक्र में होना चाहिए। यहाँ कुछ उदाहरण कोड है:

import {OnInit} from '@angular/core';
import {Location} from '@angular/common';

@Component({
  selector: 'example-component',
  templateUrl: 'xxx.html'
})
export class ExampleComponent implements OnInit
{
  constructor( private location: Location )
  {}

  ngOnInit()
  {    
    this.location.go( '/example;example_param=917' );
  }
}

यहाँ इस मामले पर कोणीय संसाधन हैं: https://angular.io/docs/ts/latest/api/common/index/Location-class.html https://angular.io/docs/ts/latest/api/ आम / सूचकांक / LocationStrategy-class.html

Answer 6

मैं इसे पाने के लिए इस तरह का उपयोग करता हूं:

const queryParamsObj = {foo: 1, bar: 2, andThis: 'text'};

this.location.replaceState(
  this.router.createUrlTree(
    [this.locationStrategy.path().split('?')[0]], // Get uri
    {queryParams: queryParamsObj} // Pass all parameters inside queryParamsObj
  ).toString()
);

- संपादित करें -

मुझे लगता है कि मुझे इसके लिए कुछ और सुझाव जोड़ने चाहिए।

यदि आप this.location.replaceState()अपने एप्लिकेशन के राउटर का उपयोग करते हैं, तो वह अपडेट नहीं किया जाता है, इसलिए यदि आप राउटर जानकारी का उपयोग करते हैं, तो बाद में यह आपके ब्राउज़र में इसके लिए समान नहीं है। उदाहरण के लिए यदि आप localizeServiceभाषा बदलने के लिए उपयोग करते हैं, तो अपने एप्लिकेशन को पिछली URL पर वापस ले जाएं जहां आप इसे बदलने से पहले थे this.location.replaceState()।

यदि आप यह व्यवहार नहीं चाहते हैं, तो आप अपडेट URL के लिए अलग विधि चुन सकते हैं, जैसे:

this.router.navigate(
  [this.locationStrategy.path().split('?')[0]],
  {queryParams: queryParamsObj}
);

इस विकल्प में आपका ब्राउज़र भी ताज़ा नहीं होता है, लेकिन आपके URLपरिवर्तन को Routerआपके एप्लिकेशन में भी इंजेक्ट किया जाता है, इसलिए जब आप भाषा स्विच करते हैं तो आपको इसमें समस्या नहीं होती है this.location.replaceState()।

बेशक आप अपनी आवश्यकताओं के लिए विधि चुन सकते हैं। पहला अधिक हल्का है क्योंकि आप URLब्राउज़र में परिवर्तन से अधिक अपने आवेदन को संलग्न नहीं करते हैं ।

Answer 7

मेरे लिए यह वास्तव में एंगुलर 4.4.5 के साथ दोनों का मिश्रण था।

राऊटर का उपयोग करना। एन्टिवेट ने realtiveTo का सम्मान न करके मेरे url को नष्ट कर दिया: सक्रिय भाग।

मैंने समाप्त कर दिया है:

this._location.go(this._router.createUrlTree([this._router.url], { queryParams: { profile: value.id } }).toString())

Answer 8

विशेषता क्वेरी का उपयोग करेंहैंडलिंग: यूआरएल बदलते समय 'मर्ज' करें।

this.router.navigate([], {
        queryParams: this.queryParams,
        queryParamsHandling: 'merge',
        replaceUrl: true,
});

Comments

यह वर्तमान में रूट किए गए घटक को पुनः लोड करने का कारण बनता है

— btx