कोणीय: बदलते मार्ग के बिना क्वेरीपराम कैसे अपडेट करें

Question

मैं एक घटक से क्वेरीपराम को अद्यतन (जोड़ने, हटाने) का प्रयास कर रहा हूं। AngularJS में, यह संभव हो सकता है धन्यवाद:

$location.search('f', 'filters[]'); // setter
$location.search()['filters[]'];    // getter

मेरे पास एक सूची के साथ एक ऐप है जिसे उपयोगकर्ता फ़िल्टर कर सकता है, ऑर्डर कर सकता है, आदि और मैं url के क्वेरीप्रेम में सभी फ़िल्टर सक्रिय करने के लिए सेट करना चाहूंगा ताकि वह url को कॉपी / पेस्ट कर सके या किसी अन्य के साथ साझा कर सके।

हालाँकि, मैं नहीं चाहता कि मेरे पृष्ठ को हर बार फ़िल्टर के चयन के बाद पुनः लोड किया जाए ।

क्या यह नए राउटर के साथ उल्लेखनीय है?

Answer 1

आप नए क्वेरी पैरामेट्स के साथ वर्तमान मार्ग पर नेविगेट कर सकते हैं, जो आपके पृष्ठ को फिर से लोड नहीं करेगा, लेकिन क्वेरी पैरामेट्स को अपडेट करेगा।

कुछ इस तरह (घटक में):

constructor(private router: Router) { }

public myMethodChangingQueryParams() {
  const queryParams: Params = { myParam: 'myNewValue' };

  this.router.navigate(
    [], 
    {
      relativeTo: activatedRoute,
      queryParams: queryParams, 
      queryParamsHandling: 'merge', // remove to replace all query params by provided
    });
}

ध्यान दें, जबकि यह पृष्ठ को पुनः लोड नहीं करेगा, यह ब्राउज़र के इतिहास में एक नई प्रविष्टि को आगे बढ़ाएगा। यदि आप इतिहास में इसे वहां नया मूल्य जोड़ने के बजाय बदलना चाहते हैं, तो आप उपयोग कर सकते हैं { queryParams: queryParams, replaceUrl: true }।

संपादित करें: जैसा कि पहले ही टिप्पणियों में बताया गया है, []और relativeToसंपत्ति मेरे मूल उदाहरण में गायब थी, इसलिए यह मार्ग बदल सकता है, न कि केवल क्वेरी पैरामेट्स। this.router.navigateइस मामले में उचित उपयोग होगा:

this.router.navigate(
  [], 
  {
    relativeTo: this.activatedRoute,
    queryParams: { myParam: 'myNewValue' },
    queryParamsHandling: 'merge'
  });

नए पैरामीटर मान को सेट करना nullURL से परम को हटा देगा।

Comments

मुझे इसे काम करने के []बजाय उपयोग करना पड़ा['.']

— Jaime Gómez

क्वेरीपराम का उपयोग करने की आवश्यकता है ['रिश्तेदार'] = this.activatedRoute; वर्तमान पृष्ठ के सापेक्ष नेविगेशन बनाने के लिए

— klonq

ओपी की समस्या के समाधान के लिए अच्छा समाधान। यह आपको नहीं मिलता है, जब तक कि मैं कुछ याद नहीं कर रहा हूं, वर्तमान पृष्ठ के इतिहास में पिछड़े और आगे जाने की क्षमता है (उदाहरण के लिए फ़िल्टर या ऑर्डर 5 बार बदला गया है, प्रत्येक का खुद का URL लेकिन एक ही घटक है) और है पृष्ठ की सामग्री दिखाई देती है कि यदि आप उन 5 URL को सीधे एक्सेस करते हैं तो यह कैसे होगा। मुझे लगता है कि आप मैन्युअल रूप से इसे पूरा कर सकते हैं this.activatedRoute.queryParams.subscribeऔर अपने घटक में विभिन्न अपडेट कर सकते हैं, लेकिन क्या कोई सरल कोणीय तरीका है कि आप इस तरह से मार्ग को लोड कर सकते हैं और आगे अपने आप काम करेंगे?

— jmq

राउटर का उपयोग करते समय। यह विंडो के ऊपर स्क्रॉल करेगा, किसी भी विचार को कैसे निष्क्रिय करना है?

— हेस

@ अरे, क्या आपको यकीन है? मुझे नहीं लगता कि यह शीर्ष पर स्क्रॉल जाएगा। कृपया इस उदाहरण पर एक नज़र डालें: stackblitz.com/edit/angular-sdtsew?file=src/app/…

— Radosław Roszkowiak

Answer 2

@ रैडोसॉव रोज़ज़कोविएक का जवाब लगभग सही है सिवाय इसके कि relativeTo: this.routeनीचे आवश्यक है:

constructor(
  private router: Router,
  private route: ActivatedRoute,
) {}

changeQuery() {
  this.router.navigate(['.'], { relativeTo: this.route, queryParams: { ... }});
}

Answer 3

कोणीय 5 में आप वर्तमान url को पार्स करके urlTree की एक प्रति आसानी से प्राप्त और संशोधित कर सकते हैं । इसमें क्वेरी परम और टुकड़े शामिल होंगे।

  let urlTree = this.router.parseUrl(this.router.url);
  urlTree.queryParams['newParamKey'] = 'newValue';

  this.router.navigateByUrl(urlTree); 

क्वेरी पैरामीटर को संशोधित करने का "सही तरीका" संभवतः createUrlTree के साथ है जैसे कि नीचे से एक नया UrlTree बनाता है जबकि हमें इसे नेविगेशनटेक्स्ट्रा का उपयोग करके संशोधित करने की अनुमति देता है ।

import { Router } from '@angular/router';

constructor(private router: Router) { }

appendAQueryParam() {

  const urlTree = this.router.createUrlTree([], {
    queryParams: { newParamKey: 'newValue' },
    queryParamsHandling: "merge",
    preserveFragment: true });

  this.router.navigateByUrl(urlTree); 
}

इस तरह से एक क्वेरी पैरामीटर निकालने के लिए आप इसे undefinedया पर सेट कर सकते हैं null।

Comments

navigateByUrlके लिए भिन्न navigateनहीं है - उरलट्री परम के साथ ही नहीं। देखें stackoverflow.com/a/45025432/271012

— 21

Answer 4

प्रयत्न

this.router.navigate([], { 
  queryParams: {
    query: value
  }
});

सिंगल कोट्स के अलावा उसी रूट नेविगेशन के लिए काम करेगा।

Comments

मैं इस सटीक चीज़ की तलाश में था। धन्यवाद!!!

— केवरिस

Answer 5

अधिकांश मतों के उत्तर ने आंशिक रूप से मेरे लिए काम किया। ब्राउज़र url वही रहा लेकिन मेरा routerLinkActiveनेविगेशन के बाद काम नहीं कर रहा था।

मेरा समाधान लोशन का उपयोग करना था।

import { Component } from "@angular/core";
import { Location } from "@angular/common";
import { HttpParams } from "@angular/common/http";

export class whateverComponent {
  constructor(private readonly location: Location, private readonly router: Router) {}

  addQueryString() {
    const params = new HttpParams();
    params.append("param1", "value1");
    params.append("param2", "value2");
    this.location.go(this.router.url.split("?")[0], params.toString());
  }
}

जब से मैं httpClient के साथ जानकारी भेजने के लिए इसका उपयोग कर रहा था, तब से मैंने क्वेरी स्ट्रिंग का निर्माण करने के लिए HttpParams का उपयोग किया। लेकिन आप इसे स्वयं बना सकते हैं।

और this._router.url.split("?")[0], वर्तमान यूआरएल से सभी पिछले क्वेरी स्ट्रिंग को निकालने के लिए है।

Comments

इस स्वीकार किए जाते हैं जवाब होना चाहिए, रूटर। Navigates भी ngOnit ताज़ा करता है, स्थान। यह ऐसा नहीं करता है! यह वास्तव में महत्वपूर्ण है क्योंकि यदि आपका घटक कुछ एनकोऑन लॉजिक (HTTP कॉल आदि) करता है तो राउटर का उपयोग करने पर उन्हें फिर से कॉल किया जाएगा। आप यह नहीं चाहते।

— डैनी होवे

आपको केवल url के लिए, रूटर की आवश्यकता क्यों है? this.location.path().split...बेहतर नहीं है?

— व्लादिमीर

@ व्लादिमीर आप सही हो सकते हैं, मैं इसे अपने घटक में अन्य उद्देश्य के लिए उपयोग कर रहा था, इसलिए यह केवल उसके लिए नहीं था। हालांकि मेरे पास मान्य करने का समय नहीं है।

— moi_meme

यदि आप क्वेरी मापदंडों को संरक्षित करना चाहते हैं तो यह काम नहीं करेगा, उदाहरण के लिए प्रचार या Google ट्रैकिंग पैरामीटर

— जॉन टिंसमैन

Answer 6

मैंने urlTreeसाथ संयोजन समाप्त कियाlocation.go

const urlTree = this.router.createUrlTree([], {
       relativeTo: this.route,
       queryParams: {
           newParam: myNewParam,
       },
       queryParamsHandling: 'merge',
    });

    this.location.go(urlTree.toString());

सुनिश्चित नहीं है कि अगर toStringसमस्या हो सकती है, लेकिन दुर्भाग्य से location.go, यह स्ट्रिंग आधारित प्रतीत होता है।

Answer 7

यदि आप मार्ग बदले बिना क्वेरी params बदलना चाहते हैं। नीचे देखें उदाहरण से आपको मदद मिल सकती है: वर्तमान मार्ग है: / खोज और लक्ष्य मार्ग (पुनः लोड पृष्ठ के बिना): / खोज? क्वेरी?

submit(value: string) {
{ this.router.navigate( ['.'],  { queryParams: { query: value } })
    .then(_ => this.search(q));
}
search(keyword:any) { 
//do some activity using }

कृपया ध्यान दें: आप इस का उपयोग कर सकते हैं। इस के बजाय । '( ' 'खोज' )।

Comments

मुझे यकीन नहीं है कि [।] की तुलना में बेहतर दृष्टिकोण है relativeTo:, लेकिन .then()मददगार था - पता नहीं था कि नेविगेट () एक वादा वापस कर दिया है, इसलिए खुशी है कि आपने पोस्ट किया!

— Drenai

Answer 8

सबसे पहले, हमें राउटर मॉड्यूल को कोणीय राउटर से आयात करना होगा और इसका उपनाम नाम घोषित करना होगा

import { Router } from '@angular/router'; ---> import
class AbcComponent implements OnInit(){
constructor(
    private router: Router ---> decalre alias name
  ) { }
}

1. आप "राउटर.नवेट" फ़ंक्शन का उपयोग करके क्वेरी पैरामीटर बदल सकते हैं और क्वेरी पैरामीटर पास कर सकते हैं

this.router.navigate([], { queryParams: {_id: "abc", day: "1", name: "dfd"} 
});

यह चालू यानी सक्रिय मार्ग में क्वेरी पैरामेट्स को अपडेट करेगा

2. नीचे क्वेरी पृष्ठ के रूप में _id, दिन और नाम के साथ abc पृष्ठ पर रीडायरेक्ट किया जाएगा

   this.router.navigate (['/ abc'], {queryParams: {_id: "abc", दिन: "1", नाम: "dfd"}});

   यह "क्वेरी" मार्ग में क्वेरी क्वेरी के साथ-साथ तीन क्वेरी पैरामीटर्स को अपडेट करेगा

क्वेरी params लाने के लिए: -

    import { ActivatedRoute } from '@angular/router'; //import activated routed

    export class ABC implements OnInit {

    constructor(
        private route: ActivatedRoute //declare its alias name
      ) {}

    ngOnInit(){
       console.log(this.route.snapshot.queryParamMap.get('_id')); //this will fetch the query params
    }