Angular 5 में URL से क्वेरी पैरामीटर कैसे प्राप्त करें?

Question

मैं कोणीय 5.0.3 का उपयोग कर रहा हूं, मैं अपने आवेदन को क्वेरी पैरामीटर जैसे गुच्छा के साथ शुरू करना चाहूंगा /app?param1=hallo&param2=123। कोणीय 2 में url से क्वेरी परम कैसे प्राप्त करें में दिया गया प्रत्येक टिप ? मेरे लिए काम नहीं करता है।

किसी भी विचार कैसे क्वेरी पैरामीटर काम पाने के लिए?

private getQueryParameter(key: string): string {
  const parameters = new URLSearchParams(window.location.search);
  return parameters.get(key);
}

यह निजी कार्य मुझे अपने मापदंडों को प्राप्त करने में मदद करता है, लेकिन मुझे नहीं लगता कि यह नए कोणीय वातावरण में सही तरीका है।

[अद्यतन:] मेरा मुख्य app की तरह लग रहा है

@Component({...})
export class AppComponent implements OnInit {

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // would like to get query parameters here...
    // this.route...
  }
}

Comments

क्या आप राउटर का उपयोग कर रहे हैं? URL कहाँ से आ रहा है?

— विनोद भावनानी

हाँ, एक सक्रियण है। मैंने अपने प्रश्न को यह दिखाने के लिए अद्यतन किया कि मेरा मुख्य घटक कैसा दिखता है।

— लार्स

क्या आप मुझे अपना मार्ग भी निरंतर दिखा सकते हैं, जहाँ आपने सभी मार्गों की स्थापना की है?

— विनोद भावनानी

const appRoutes: मार्ग = [{पथ: "एक", घटक: PageOneComponent}, {path: "", redirectTo: "/ one", pathMatch: "full"}, {path: "#", redirectTo: "/ एक"} ]; मेरा मार्ग स्थिर। मैं मुख्य ऐप में सभी मापदंडों को एक डीटीओ में संग्रहीत करना चाहता हूं, फिर दूसरे पृष्ठ पर नेविगेट करूंगा। पृष्ठ नेविगेशन अपेक्षा के अनुसार काम करता है, लेकिन मुझे क्वेरी पैरामीटर मुख्य रूप से मेरे 'getQueryParameter' फ़ंक्शन द्वारा ही मिलते हैं। मुझे आपके सवाल का एहसास है कि वहाँ कुछ है जो मैं भूल गया हूं। क्या मुझे अपना पैरामीटर नाम कहीं भी अंकित करने की आवश्यकता है?

— लार्स

हां, आपके मार्गों में, आपको मापदंडों को भी परिभाषित करना होगा। यदि आप angular.io पर रूटिंग डॉक्स की जांच करते हैं, तो आप देख सकते हैं कि वे किसी विशेष मार्ग पर मापदंडों को कैसे परिभाषित करते हैं। कुछ इस तरह से {पथ: 'abc /: param1', घटक: ComponentsClassName}

— विनोद भावनानी

Answer 1

कोणीय 5 में, क्वेरी परम को सब्सक्राइब करके एक्सेस किया जाता है this.route.queryParams।

उदाहरण: /app?param1=hallo&param2=123

param1: string;
param2: string;
constructor(private route: ActivatedRoute) {
    console.log('Called Constructor');
    this.route.queryParams.subscribe(params => {
        this.param1 = params['param1'];
        this.param2 = params['param2'];
    });
}

जबकि, पथ चर द्वारा पहुँचा जाता है this.route.snapshot.params

उदाहरण: /param1/:param1/param2/:param2

param1: string;
param2: string;
constructor(private route: ActivatedRoute) {
    this.param1 = this.route.snapshot.params.param1;
    this.param2 = this.route.snapshot.params.param2;
}

Comments

कोणीय 6 डॉक्स के अनुसार , ActivatedRoute.queryParams और .params का उपयोग हतोत्साहित किया जाता है और भविष्य के संस्करणों में पदावनत किया जा सकता है; यहाँ

— grreeenn

@ShubhenduVaid बताती हैं कि, उन्हें कंस्ट्रक्टर के बजाय ngOnInit का उपयोग करना चाहिए। सबसे अच्छा अभ्यास RxJS का उपयोग करने योग्य होगा, फिर वेधशालाओं के साथ काम करते समय घोषणात्मक दृष्टिकोण का उपयोग करें, फिर html पर async का उपयोग करना

— coderpatomx

Answer 2

यह मेरे लिए सबसे साफ समाधान है

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

export class MyComponent {
  constructor(
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    const firstParam: string = this.route.snapshot.queryParamMap.get('firstParamKey');
    const secondParam: string = this.route.snapshot.queryParamMap.get('secondParamKey');
  }
}

Comments

यह सहायक है, धन्यवाद। कोणीय 6.0.8 के रूप में, मैं इसका उपयोग कर रहा हूं और यह मेरे लिए काम करता है: this.route.snapshot.queryParams ["firstParamKey"]

— 3

यह मेरे लिए Angular8 में काम करता है। this.route.snapshot.queryParamMap काम करता है। यह मेरे लिए काम नहीं करता है।

— रोमियो प्रॉफेट

Answer 3

मुझे पता है कि ओपी ने कोणीय 5 समाधान के लिए कहा, लेकिन फिर भी आप सभी के लिए जो नए (6+) अंगुली संस्करणों के लिए इस प्रश्न पर ठोकर खाते हैं। हवाला देते हुए डॉक्स ActivatedRoute.queryParams (जो अन्य उत्तर से ज्यादातर के आधार पर कर रहे हैं) के बारे में,:

दो पुराने गुण अभी भी उपलब्ध हैं। वे अपने प्रतिस्थापन की तुलना में कम सक्षम हैं , हतोत्साहित हैं और भविष्य के कोणीय संस्करण में पदावनत हो सकते हैं ।

params - एक अवलोकन योग्य है जिसमें मार्ग के लिए आवश्यक और वैकल्पिक पैरामीटर शामिल हैं। इसके स्थान पर परमपाम का उपयोग करें।

queryParams - एक अवलोकन योग्य है जिसमें सभी मार्गों के लिए क्वेरी पैरामीटर उपलब्ध हैं। इसके बजाय queryParamMap का उपयोग करें।

डॉक्स के अनुसार , क्वेरी परम को प्राप्त करने का सरल तरीका इस प्रकार होगा:

constructor(private route: ActivatedRoute) { }

ngOnInit() {
    this.param1 = this.route.snapshot.paramMap.get('param1');
    this.param2 = this.route.snapshot.paramMap.get('param2');
}

अधिक उन्नत तरीकों (जैसे उन्नत घटक पुन: उपयोग) के लिए यह डॉक्स अध्याय देखें।

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

जैसा कि नीचे दिए गए टिप्पणियों में सही ढंग से कहा गया है, यह उत्तर गलत है - कम से कम ओपी द्वारा निर्दिष्ट मामले के लिए।

ओपी वैश्विक क्वेरी पैरामीटर (/ एप्लिकेशन; param1 = hallo & param2 = 123) प्राप्त करने के लिए कहता है; इस स्थिति में आपको queryParamMap (जैसे @ dapperdan1985 उत्तर में) का उपयोग करना चाहिए।

दूसरी ओर, पैरामैप, मार्ग के लिए विशिष्ट मापदंडों पर प्रयोग किया जाता है (उदाहरण के लिए / app /: param1 /: param2, जिसके परिणामस्वरूप / app / hallo / 123)।

इसे इंगित करने के लिए @JasonRoyle और @daka को धन्यवाद।

Comments

क्या यह क्वेरी स्ट्रिंग मापदंडों को लाने के लिए उपयोग queryParamMapनहीं किया जाना चाहिए paramMap?

— जेसन रॉयले

@JasonRoyle लगता है आप सही हैं, paramMapकाम नहीं करता है।

— डाका

इस उत्तर को उपरोक्त टिप्पणियों के अनुसार सही करने की आवश्यकता है।

— डाका

@ जैसनरॉयल, डाका, आप सही हैं, इसे इंगित करने के लिए धन्यवाद। जवाब सही दिया।

— २१:

मिला परफेक्ट वर्किंग कोड: jsonworld.com/blog/…

— सोनी कुमारी

Answer 4

आप HttpParams का उपयोग भी कर सकते हैं , जैसे:

  getParamValueQueryString( paramName ) {
    const url = window.location.href;
    let paramValue;
    if (url.includes('?')) {
      const httpParams = new HttpParams({ fromString: url.split('?')[1] });
      paramValue = httpParams.get(paramName);
    }
    return paramValue;
  }

Comments

बस स्पष्ट करें, मेरे पास दो डोमेन बिंदु हैं जो विभिन्न भाषा साइट पर हैं। लोकलहोस्ट / -> एन, लोकलहोस्ट / /? लंग = फ्र -> फ्रेंच। और मेरे पास रूटिंग है path: '', redirectTo: '/list' :। यह .route.snapshot मेरे लिए काम नहीं करता है क्योंकि यह पुनर्निर्देशित करता है / सूची जो 'लैंग' क्वेरी को समाप्त करता है। लेकिन यह समाधान मेरे लिए काम करता है।

— रयान हुआंग

जैसा @RyanHuang मैं एक ही मुद्दे की तरह है। लेकिन इस समाधान ने मेरे पहले परीक्षण पर काम किया।

— Gi1ber7

ऊपर से बेहतर हल खोजें: jsonworld.com/blog/…

— सोनी कुमारी

Answer 5

import { ParamMap, Router, ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
    console.log(this.route.snapshot.queryParamMap);
}

अपडेट करें

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

export class LoginComponent {
    constructor(private router: Router) {
        const snapshot: RouterStateSnapshot = router.routerState.snapshot;
        console.log(snapshot);  // <-- hope it helps
    }
}

Comments

ऐसा लगता है कि पर्याप्त नहीं है, मुझे ActivatedRouteSnapshot मिलता है, लेकिन queryParams एक खाली वस्तु है, params भी खाली है और .queryParamMap.get ('नाम') शून्य देता है। ऐसा लगता है कि ngOnInit () ऐसे क्वेरी पैरामीटर प्राप्त करना बहुत जल्दी है।

— लार्स

वास्तव में यदि आप इस परम को प्राप्त करना चाहते हैं तो आपको अपना मार्ग बदलना चाहिए।

— दिमित्री ग्रिन्को

मेरे पास अलग-अलग क्रम में लगभग 10 पैरामीटर हैं। इसलिए मुझे नामित पैरामीटर का उपयोग करना चाहिए। और मैं यह समझने के लिए अपने मुख्य AppComponent को कैसे निर्धारित करूं कि 10 पैरामीटर हैं। url / myprogram? = a = 1 & b = 2 और c = 4 ... यह एक समस्या है? क्या मुझे हर पैरामीटर को दूसरे कंपोनेंट में रूट करना होगा? मुझे आशा नहीं है।

— लार्स

क्या आपने यह कोशिश की? this.route.snapshot.queryParamMap

— दिमित्री

@DmitryGrinko एक इकाई आईडी को एक मार्ग में रखना एक बुरा पैटर्न नहीं है, यह एक विस्तृत दृश्य के लिए एक गहरी लिंक के लिए अनुमति देता है।

— कार्ल

Answer 6

मेरे लिए इसका काम:

constructor(private route: ActivatedRoute) {}

ngOnInit()
{
    this.route.queryParams.subscribe(map => map);
    this.route.snapshot.queryParams; 
}

अधिक विकल्प देखें angular2 में url से क्वेरी परम कैसे प्राप्त करें?

Answer 7

इस सवाल के पार जब मैं एक समान समाधान की तलाश में था, लेकिन मुझे पूर्ण एप्लिकेशन स्तर रूटिंग या अधिक आयातित मॉड्यूल जैसी किसी चीज की आवश्यकता नहीं थी।

निम्न कोड मेरे उपयोग के लिए बहुत अच्छा काम करता है और इसके लिए किसी अतिरिक्त मॉड्यूल या आयात की आवश्यकता नहीं होती है।

  GetParam(name){
    const results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if(!results){
      return 0;
    }
    return results[1] || 0;
  }

  PrintParams() {
    console.log('param1 = ' + this.GetParam('param1'));
    console.log('param2 = ' + this.GetParam('param2'));
  }

http://localhost:4200/?param1=hello&param2=123 आउटपुट:

param1 = hello
param2 = 123

Answer 8

क्वेरी और पथ परम (कोणीय 8)

Url के लिए जैसे https://myapp.com/user/666/read?age=23 उपयोग करें

import { combineLatest } from 'rxjs';
// ...

combineLatest( [this.route.paramMap, this.route.queryParamMap] )
  .subscribe( ([pathParams, queryParams]) => {
    let userId = pathParams.get('userId');    // =666
    let age    = queryParams.get('age');      // =23
    // ...
  })

अपडेट करें

मामले में जब आप उपयोग करते हैं this.router.navigate([someUrl]);और आपके क्वेरी पैरामीटर someUrlस्ट्रिंग में अंतःस्थापित होते हैं तो कोणीय एक URL को एनकोड करता है और आपको कुछ इस तरह मिलता है https://myapp.com/user/666/read%3Fage%323 - और इसके बाद के संस्करण गलत परिणाम देंगे ( क्वेरीप्रेम खाली हो जाएगा, और यदि पथ अंतिम छोर पर है तो पथ परम को चिपका दिया जा सकता है)। इस मामले में इसके लिए नेविगेशन का तरीका बदलें

this.router.navigateByUrl(someUrl);

Comments

@Kamil Kiełczewski को धन्यवाद, आप मेरा दिन बचाएं

— Tan Nguyen

Answer 9

दुर्भाग्य से, सबसे साफ समाधान सबसे विलक्षण समाधान नहीं है। कोणीय के हाल के संस्करणों में, यह अन्य उत्तरों में सुझाया गया है कि आप सक्रिय रूप से सक्रिय रूप से सक्रिय और विशेष रूप से स्नैपशॉट प्रॉपर्टी का उपयोग करके क्वेरी परम प्राप्त कर सकते हैं:

this.route.snapshot.queryParamMap.get('param')

या सदस्यता संपत्ति (उन मामलों में उपयोग की जाती है जहां क्वेरी स्ट्रिंग अपडेट होगी, उदाहरण के लिए उपयोगकर्ता आईडी के माध्यम से नेविगेट करना):

this.route.queryParamMap.subscribe(params => console.log(params));

मैं यहां आपको यह बताने के लिए हूं कि इन समाधानों में एक अंतराल दोष है जो कुछ समय से हल नहीं हुआ है: https://github.com/angular/angular/issues/12157

सब सब में, एकमात्र बुलेट प्रूफ समाधान अच्छे पुराने वेनिला जावास्क्रिप्ट का उपयोग करना है। इस मामले में, मैंने URL हेरफेर के लिए एक सेवा बनाई:

import { Injectable } from '@angular/core';
import { IUrl } from './iurl';

@Injectable()
export class UrlService {
    static parseQuery(url: string): IUrl {
        const query = url.slice(url.indexOf('?')+1).split('&').reduce( (acc,query) => {
            const parts = query.split('=');
            acc[parts[0]] = parts[1];
            return acc;
        }, {});

        return {
            a: query['a'],
            b: query['b'],
            c: query['c'],
            d: query['d'],
            e: query['e']
        }
    }
}

Answer 10

कोणीय राउटर विधि parseUrl (url: string) प्रदान करता है जो UrlTree में url को पार्स करता है । UrlTree के गुणों में से एक क्वेरीपराम हैं। तो आप sth कर सकते हैं जैसे:

this.router.parseUrl(this.router.url).queryParams[key] || '';

Comments

कृपया विभिन्न प्रश्नों के कई समान उत्तर पोस्ट न करें। इस अभ्यास के बारे में कुछ उपयोगी सलाह यहाँ दी गई है

— डेविड बक

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

— टॉम

Answer 11

जब आपके पास एक खाली मार्ग ऑब्जेक्ट होता है, तो यह मुख्य रूप से इस तथ्य के कारण होता है कि आप अपने app.component.html में राउटर-आउटलेट का उपयोग नहीं कर रहे हैं।

इसके बिना, आप गैर-रिक्त उप-विशेषण, विशेष रूप से params और queryParams के साथ एक सार्थक रूट ऑब्जेक्ट प्राप्त करने में सक्षम नहीं होंगे।

<router-outlet><router-outlet>अपने फोन करने से पहले जोड़ने की कोशिश करें <app-main-component></app-main-component>

इससे पहले, सुनिश्चित करें कि आपके पास ऐप-राउटिंग में आपका क्वेरी परम तैयार है> जो ऐप घटक द्वारा उपयोग किए गए क्लास रूट को निर्यात करता है:

param: '/param/:dynamicParam', path: MyMainComponent

निश्चित रूप से अंतिम बात, अपने परम को पाने के लिए, मैं उस व्यक्ति का उपयोग करता हूं this.route.snapshot.params.dynamicParamजहां डायनामिकरम आपके ऐप-राउटिंग में उपयोग किया जाने वाला नाम है :)

Answer 12

अपने मार्गों से सावधान रहें। एक "पुनर्निर्देशन" किसी भी क्वेरी पैरामीटर को हटा देगा।

const appRoutes: Routes [
 {path: "one", component: PageOneComponent},
 {path: "two", component: PageTwoComponent},
 {path: "", redirectTo: "/one", pathMatch: full},
 {path: "**", redirectTo: "/two"}
]

मैंने अपने मुख्य घटक को क्वेरी पैरामीटर जैसे "/ main; param1 = a & param2 = b" कहा और मान लिया कि मेरे क्वेरी पैरामीटर "ngOnInit ()" विधि में मुख्य घटक में पुनर्निर्देशन अग्रेषण के प्रभावी होने से पहले आते हैं।

लेकिन यह गलत है। रीडायरेक्ट पहले आ जाएगा, क्वेरी मापदंडों को छोड़ दें और क्वेरी पैरामीटर के बिना मुख्य घटक में ngOnInit () विधि को कॉल करें।

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

{path: "", component: PageOneComponent},

और अब मेरे क्वेरी पैरामीटर मुख्य घटक ngOnInit में और PageOneComponent में भी सुलभ हैं।

Answer 13

इसमें पाया गया: अभिभावक घटकों को एक्टिवेटेड रुएट से खाली परम प्राप्त होते हैं

मेरे लिए काम किया:

import {Component, OnDestroy, OnInit} from '@angular/core';
import { Router, ActivatedRoute, Params, RoutesRecognized } from '@angular/router';

@Component({
  selector: 'app-navigation-bar',
  templateUrl: './navigation-bar.component.html',
  styleUrls: ['./navigation-bar.component.scss']
})
export class NavigationBarComponent implements OnInit, OnDestroy {
  private sub: any;
  constructor(private route: ActivatedRoute, private router: Router) {}

  ngOnInit() {
    this.sub = this.router.events.subscribe(val => {
      if (val instanceof RoutesRecognized) {
        console.log(val.state.root.firstChild.params);
      }
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }

}

Answer 14

बस उसी समस्या पर ठोकर खाई और यहाँ अधिकांश उत्तर केवल कोणीय आंतरिक मार्ग के लिए हल करने लगते हैं, और फिर उनमें से कुछ मार्ग मापदंडों के लिए हैं जो अनुरोध पैरामीटर के समान नहीं हैं।

मैं अनुमान लगा रहा हूं कि लार्स द्वारा मूल प्रश्न के समान उपयोग का मामला है।

मेरे लिए उपयोग का मामला उदाहरण के लिए रेफरल ट्रैकिंग है:

कोणीय चल रहा है mycoolpage.com, हैश रूटिंग के साथ, इसलिए mycoolpage.comरीडायरेक्ट करता है mycoolpage.com/#/। रेफरल के लिए, हालांकि, इस तरह के एक लिंक mycoolpage.com?referrer=fooभी उपयोगी होना चाहिए। दुर्भाग्य से, कोणीय सीधे अनुरोध मापदंडों को हटा देता है, सीधे जा रहा है mycoolpage.com/#/।

किसी खाली घटक + ऑथगार्ड का उपयोग करने और प्राप्त करने queryParamsया करने के साथ किसी भी तरह की 'ट्रिक' queryParamMap, दुर्भाग्य से, मेरे लिए काम नहीं करती। वे हमेशा खाली थे।

मेरा हैकी समाधान एक छोटी सी स्क्रिप्ट में इसे संभालने के लिए समाप्त हुआ index.htmlजिसमें अनुरोध पैरामीटर के साथ पूर्ण URL प्राप्त होता है। मैं तब स्ट्रिंग हेरफेर के माध्यम से अनुरोध परम मान प्राप्त करता हूं और इसे विंडो ऑब्जेक्ट पर सेट करता हूं। एक अलग सेवा तब विंडो ऑब्जेक्ट से आईडी प्राप्त करना संभालती है।

index.html स्क्रिप्ट

const paramIndex = window.location.href.indexOf('referrer=');
if (!window.myRef && paramIndex > 0) {
  let param = window.location.href.substring(paramIndex);
  param = param.split('&')[0];
  param = param.substr(param.indexOf('=')+1);
  window.myRef = param;
}

सर्विस

declare var window: any;

@Injectable()
export class ReferrerService {

  getReferrerId() {
    if (window.myRef) {
      return window.myRef;
    }
    return null;
  }
}

Answer 15

सरल उपाय

 // in routing file
       {
            path: 'checkout/:cartId/:addressId',
            loadChildren: () => import('./pages/checkout/checkout.module').then(m => m.CheckoutPageModule)
          },

    // in Component file

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

                 constructor(
                      private _Router: ActivatedRoute
                  ) { }

                  ngOnInit() {
                    this.cartId = this._Router.snapshot.params.cartId;
                    this.addressId = this._Router.snapshot.params.addressId;
                    console.log(this.addressId, "addressId")
                    console.log(this.cartId, "cartId")
                  }

Answer 16

http: // localhost: 4200 / उत्पादों क्रम लोकप्रिय =

हम इस तरह से ऑर्डर क्वेरी परम तक पहुँच सकते हैं:

this.route.queryParams
      .filter(params => params.order)
      .subscribe(params => {
        console.log(params)// {order: "popular"}

        this.order = params.order;
        console.log(this.order); // popular
      });
  }

वहाँ भी है quParamMap, जो एक paramMap वस्तु के साथ एक नमूदार देता है।

निम्नलिखित मार्ग URL दिया गया:

http: // localhost: 4200 / उत्पादों क्रम लोकप्रिय और फिल्टर = नई =

this.route.queryParamMap.subscribe(params => {
  this.orderObj = {...params.keys, ...params};
});

स्रोत - https://alligator.io/angular/query-parameters/

Answer 17

मुझे लगता है कि कोणीय 8:

ActivatedRoute.paramsद्वारा प्रतिस्थापित किया गया है द्वारा प्रतिस्थापित ActivatedRoute.paramMap ActivatedRoute.queryParamsकिया गया है ActivatedRoute.queryParamMap

Answer 18

/*
Example below url with two param (type and name) 
URL : http://localhost:4200/updatePolicy?type=Medicare%20Insurance&name=FutrueInsurance
*/ 
  constructor(private route: ActivatedRoute) {
    //Read url query parameter `enter code here`
  this.route.queryParams.subscribe(params => {
    this.name= params['type'];
    this.type= params['name'];
    alert(this.type);
    alert(this.name);

 });

  }

Answer 19

यदि आप कोणीय राउटर ट्राय नहीं कर रहे हैं, तो क्वेरिस्ट्रिंग करें । इसे स्थापित करो

npm install --save querystring

अपने प्रोजेक्ट के लिए। अपने कंपोनेंट में कुछ ऐसा करें

import * as qs from 'querystring';
...
ngOnInit() {
   const params = qs.parse(window.location.search.substring(1));
   ...
}

यह substring(1)आवश्यक है क्योंकि यदि आपके पास ऐसा कुछ है '/mypage?foo=bar'तो इसके लिए महत्वपूर्ण नाम होगा?foo