कोणीय 2 में url से क्वेरी परम कैसे प्राप्त करें?

Question

मैं angular2.0.0-beta.7 का उपयोग करता हूं। जब एक घटक को एक पथ पर लोड किया /path?query=value1जाता है जैसे कि इसे पुनर्निर्देशित किया जाता है /path। क्यों हटाए गए थे GET के परांठे? मैं मापदंडों को कैसे संरक्षित कर सकता हूं?

राउटर में मेरी त्रुटि है। अगर मेरे पास एक मुख्य मार्ग है

@RouteConfig([
  {
      path: '/todos/...',
      name: 'TodoMain',
      component: TodoMainComponent
  }
])

और मेरा बाल मार्ग जैसे

@RouteConfig([
  { path: '/', component: TodoListComponent, name: 'TodoList', useAsDefault:true },
  { path: '/:id', component: TodoDetailComponent, name:'TodoDetail' }
])

तो मैं TodoListComponent में परम प्राप्त नहीं कर सकता। मैं पाने में सक्षम हूं

params("/my/path;param1=value1;param2=value2") 

लेकिन मुझे क्लासिक चाहिए

query params("/my/path?param1=value1&param2=value2")

Comments

आपने इसके @RouteConfigलिए कैसे निर्दिष्ट किया path?

— पंकज पारकर

मुझे त्रुटि मिली। मेरे पास मुख्य मार्ग और बाल मार्ग है और अगर मेरे पास मुख्य मार्ग जैसे {पथ: '/' todos / ... ', नाम है:' TodoMain ', घटक: TodoMainComponent} और बाल मार्ग {path:' / ', घटक: TodoListComponent, नाम: 'टोडलिस्ट', यूसेजएडफॉल्ट: ट्रू}, यह काम नहीं है और बिना क्वेरी के url को रीडायरेक्ट करना है।

— FireGM

Answer 1

एक के उदाहरण को इंजेक्ट करके ActivatedRoute, एक queryParamsऔर एक paramsअवलोकन सहित विभिन्न वेधशालाओं की सदस्यता ले सकते हैं :

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

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

  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    // Note: Below 'queryParams' can be replaced with 'params' depending on your requirements
    this.activatedRoute.queryParams.subscribe(params => {
        const userId = params['userId'];
        console.log(userId);
      });
  }

}

एक नोट पर अंकुरण अंकन

@Reto और @ codef0rmer ने काफी हद तक सही बताया था कि, आधिकारिक डॉक्स के अनुसार, unsubscribe()घटक onDestroy()विधि इस उदाहरण में अनावश्यक है। यह मेरे कोड नमूने से निकाल दिया गया है। ( इस ट्यूटोरियल में ब्लू अलर्ट बॉक्स देखें )

Comments

मैं आगे इस विशेष मामले में एक वादा के साथ सदस्यता को बदलने का सुझाव देता हूं। this.activatedRoute.params.toPromise () .then (प्रतिक्रिया => ...) .catch (त्रुटि => ...);

— दिसम्बर

मैं "ActiveRoute" कहाँ से पास कर सकता हूँ?

— मिचली

आधिकारिक दस्तावेज से: क्या मुझे सदस्यता समाप्त करने की आवश्यकता है? The Router manages the observables it provides and localizes the subscriptions. The subscriptions are cleaned up when the component is destroyed, protecting against memory leaks, so we don't need to unsubscribe from the route params Observable.

— रीटो

कोणीय सदस्यता (या वादा) को फायर किए बिना रीडायरेक्ट करता है। मैं टोकन के साथ मूल oAUth कॉलबैक देख सकता हूं, लेकिन फिर यह क्वेरी परमेस और कंसोल के बिना रूट पर रीडायरेक्ट करता है ।log (param) सिर्फ एक खाली वस्तु है।

— फ्लेवरस्केप

@ शोभन, हाँ एक अंतर है। स्विचपॉपर ऑपरेटर एक ऑब्जर्वेबल देता है जबकि सब्स्क्राइबर ऑपरेटर ऑब्जर्वर (हमारे घटक) को उन वस्तुओं को देखने की अनुमति देता है जो अंततः ऑब्जर्वेबल द्वारा उत्सर्जित होती हैं। इसलिए डॉक्स में स्विचमैप के 2 उदाहरण कार्यरत हैं। 1) उन्होंने हेरोस के लिए अनुरोध करने के लिए स्विचपाइप का उपयोग किया है। स्विचपाइप, सदस्यता के विपरीत, यह सुनिश्चित करेगा कि अनुरोध रद्द हो गया है फिर भी उपयोगकर्ता को नायक को पुनः प्राप्त करते समय मार्ग पर फिर से नेविगेट करना चाहिए। 2) एक async पाइप का उपयोग किया जाता है। Async पाइप एक अवलोकनीय उपभोग करते हैं, इसलिए किसी को सब्सक्राइब नहीं करना चाहिए (Async पाइप आपके लिए ऐसा करेगा)।

— स्टीफन पॉल

Answer 2

जब इस तरह का URL http://stackoverflow.com?param1=value है

आप कोड फॉलो करके परम 1 प्राप्त कर सकते हैं:

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

@Component({
    selector: '',
    templateUrl: './abc.html',
    styleUrls: ['./abc.less']
})
export class AbcComponent implements OnInit {
    constructor(private route: ActivatedRoute) { }

    ngOnInit() {
        // get param
        let param1 = this.route.snapshot.queryParams["param1"];
    }
}

Comments

इसका मतलब यह है कि आपको अब रेककनफिग पथ में "/: id" जोड़ने की आवश्यकता नहीं है? क्योंकि मुझे "अपरिभाषित" मिलता है, जब मैं इसका उपयोग करता हूं तो मुझे अभी भी कहीं न कहीं एक त्रुटि होनी चाहिए

— Axelle

महान। यह मैं देख रहा था क्योंकि मुझे एक डायनामिक सर्वर url से सीधे params पढ़ने की आवश्यकता है। मैं नेविगेट का उपयोग नहीं कर सकता।

— .11

Answer 3

यद्यपि यह प्रश्न संस्करण बीटा 7 को निर्दिष्ट करता है , यह प्रश्न कोणीय 2 क्वेरी मापदंडों जैसे सामान्य वाक्यांशों के लिए Google पर शीर्ष खोज परिणाम के रूप में भी आता है । इस कारण से यहां नवीनतम राउटर (वर्तमान में अल्फा.7 ) के लिए एक उत्तर है ।

जिस तरह से परम्स पढ़े जाते हैं वह नाटकीय रूप से बदल गया है। सबसे पहले आपको Routerअपने कंस्ट्रक्टर पैरामीटर में निर्भरता को इंजेक्ट करने की आवश्यकता है जैसे:

constructor(private router: Router) { }

और उसके बाद हम अपने ngOnInitतरीके पर क्वेरी मापदंडों के लिए सदस्यता ले सकते हैं (निर्माता ठीक भी है, लेकिन ngOnInitपरीक्षण के लिए उपयोग किया जाना चाहिए)

this.router
  .routerState
  .queryParams
  .subscribe(params => {
    this.selectedId = +params['id'];
  });

इस उदाहरण में हमने URL से क्वेरी परम आईडी की तरह पढ़ा example.com?id=41।

नोटिस करने के लिए अभी भी कुछ चीजें हैं:

1. हमेशा की paramsतरह संपत्ति तक पहुँच params['id']एक स्ट्रिंग लौटाता है , और इसे इसके साथ उपसर्ग करके संख्या में परिवर्तित किया जा सकता है +।
2. क्वेरी पैराम्स को अवलोकनीय मानने का कारण यह है कि यह नए घटक को लोड करने के बजाय उसी घटक उदाहरण को फिर से उपयोग करने की अनुमति देता है। हर बार क्वेरी परम को बदल दिया जाता है, यह एक नई घटना का कारण बनेगा जिसे हमने सब्सक्राइब किया है और इस प्रकार हम तदनुसार बदलावों पर प्रतिक्रिया कर सकते हैं।

Comments

क्या एक ही सदस्य में कई पैरामीटर होने का कोई तरीका है? उदाहरण के लिए, मैं या तो 'आईडी ’या to आइडेंटिटी’ को इस पर जाना चाहूंगा।

— फंदिनहलान

@phandinhlan: खैर, यह वास्तव में कोणीय 2. से संबंधित सवाल नहीं है। यह बेशक लागू किया जा सकता है, लेकिन आपको तर्क को स्वयं परिभाषित करने की आवश्यकता है। मूल रूप से आप जो करना चाहते हैं, वह पहले चेक करना है कि क्या पहली कुंजी परिभाषित की गई है और उसके बाद ही उस से मान पढ़ें, और यदि नहीं, तो दूसरी कुंजी के साथ मान पढ़ें। ऐसा कुछ हासिल किया जा सकता है if (params.hasOwnProperty('id')) { this.selectedId = params['id'] } else { this.selectedId = params['identification']}।

— रूप हक्लिनन

हाँ, मैंने ऐसा कुछ करना समाप्त कर दिया। मैंने सोचा था कि कुछ "तरीके से" बनाया जाएगा: this.selectedId = + params ['id']; this.selectedId = + params ['पहचान']; बेशक यह कोई मतलब नहीं है और काम नहीं करता है।

— फण्डीहलान 21

Answer 4

मुझे वास्तव में @ स्टीवपॉल का उत्तर पसंद आया लेकिन हम बिना किसी सब्सक्राइबर / सदस्यता समाप्त कॉल के बिना भी ऐसा कर सकते हैं।

import { ActivatedRoute } from '@angular/router';
constructor(private activatedRoute: ActivatedRoute) {
    let params: any = this.activatedRoute.snapshot.params;
    console.log(params.id);
    // or shortcut Type Casting
    // (<any> this.activatedRoute.snapshot.params).id
}

Comments

इस के साथ निश्चित रूप से एक चेतावनी यह है कि यह प्रारंभिक मूल्य होगा और बाद के परिवर्तन प्रतिबिंबित नहीं होंगे। इसलिए यदि आप URL पैरामीटर को अपने तर्क के भाग के रूप में प्रोग्रामेटिक रूप से बदल रहे हैं, तो आपको कुछ ऐसा होना चाहिए जिसके बारे में आपको जानकारी होनी चाहिए

— ambidexterous

यह निश्चित नहीं है कि अगर यह कोणीय के बाद के संस्करणों के साथ बदल गया है, लेकिन मैं अब इसे इस पर देखता हूं। इसमें शामिल है। Route.snapshot.queryParams

— माइकल

Answer 5

क्वेरी परम भेजने के लिए

import { Router } from '@angular/router';
this.router.navigate([ '/your-route' ], { queryParams: { key: va1, keyN: valN } });

क्वेरी परम प्राप्त करने के लिए

import { ActivatedRoute } from '@angular/router';
this.activatedRoute.queryParams.subscribe(params => {
    let value_1 = params['key'];
    let value_N = params['keyN'];
});

---

आधिकारिक स्रोत

Comments

रीडिंग ठीक काम करता है। लेकिन यह मामला संवेदनशील है। हम इसे असंवेदनशील कैसे बना सकते हैं?

— यूनी

Answer 6

नमस्ते, आप URLSearchParams का उपयोग कर सकते हैं, आप यहां इसके बारे में अधिक पढ़ सकते हैं ।

आयात:

import {URLSearchParams} from "@angular/http";

और समारोह:

getParam(){
  let params = new URLSearchParams(window.location.search);
  let someParam = params.get('someParam');
  return someParam;
}

सूचना : यह सभी प्लेटफार्मों द्वारा समर्थित नहीं है और कोणीय डॉक्स द्वारा "EXPERIMENTAL" स्थिति में प्रतीत होता है

Comments

यह मेरे लिए काम नहीं करता है। मैंने पाया है कि window.location.search में क्वेरिस्ट्रिंग मापदंडों का प्रमुख प्रश्न चिह्न शामिल है। तो, पहले पैरामीटर के लिए कुंजी पर प्रश्न चिह्न लगा होगा।

— एजे मॉरिस

ए जे मॉरिस, अपने मुद्दे के बारे में if (window.location.search.indexOf('?') == 0){ normalizedQueryString = window.location.search.substring(1); } else { normalizedQueryString = window.location.search; } let params = new URLSearchParams(normalizedQueryString);

— जानने के लिए

URLSearchParams इसे हटा दिया गया है। अब आप इसे ActivatedRoute के साथ कर सकते हैं।

— रॉबर्ट ब्लास्को विलारोया

Answer 7

सबसे पहले, जो मैंने Angular2 के साथ काम करते हुए पाया है वह यह है कि एक क्वेरी स्ट्रिंग वाला url होगा /path;query=value1

एक घटक का उपयोग करने के लिए आप इसका उपयोग करते हैं तो यह है, लेकिन अब एक कोड ब्लॉक का अनुसरण करता है:

    constructor(params: RouteParams){
    var val = params.get("query");
    }

जब आप घटक को लोड करते हैं तो इसे क्यों हटाया जाएगा, यह डिफ़ॉल्ट व्यवहार नहीं है। मैंने एक साफ परीक्षण परियोजना में विशिष्ट रूप से जांच की और पुनर्निर्देशित या परिवर्तित नहीं किया गया था। क्या यह एक डिफ़ॉल्ट मार्ग या कुछ और है जो रूटिंग के बारे में विशेष है?

Https://angular.io/docs/ts/latest/guide/router.html# ! #query-parameters पर Angular2 ट्यूटोरियल में क्वेरी स्ट्रिंग्स और परम के साथ रूटिंग के बारे में पढ़ें!

Comments

मैं "जैसे param1 = value1; param2 = value2" का उपयोग नहीं कर सकता, यह लिंक किसी अन्य साइट पर उत्पन्न हुआ और मेरी साइट पर "example.com/auth?code_for_auth=askjfbkajdsffajajdf"

— FireGM

जिस तरह से फिलहाल Angular2 में रूटिंग स्थापित की गई है, मुझे नहीं लगता कि यह वास्तव में संभव है। चाइल्ड रूटिंग मैट्रिक्स url पर निर्भर होने के बाद से किसी प्रकार के वर्कअराउंड की आवश्यकता होने वाली है। जैसा कि मैं कम से कम जानता हूं। मैं इसे अपने वेबसर्वर में इंटरसेप्ट करूंगा और उन्हें हैक के रूप में बदल दूंगा, लेकिन मैं इस समय एक और तरीका नहीं सोच सकता हूं

— Namirna

आपको लिंकिंग साइट से अपना यूआरएल बदलने के लिए कहने की संभावना नहीं है?

— नमिरण

नहीं, लेकिन मैंने समस्या को केवल मैन्युअल रूप से पार्स स्थान पर हल किया है

— ।पथ

इस समाधान को हटा दिया गया!

Answer 8

जब आप नीचे दिए गए अनुसार ActivatedRoute का उपयोग करके URL में पास किए गए क्वेरी पैरामीटर प्राप्त कर सकते हैं: -

url: - http: /domain.com? test = abc

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

@Component({
  selector: 'my-home'
})
export class HomeComponent {

  constructor(private sharedServices : SharedService,private route: ActivatedRoute) { 
    route.queryParams.subscribe(
      data => console.log('queryParams', data['test']));
  }

}

Answer 9

ऑब्जेक्ट के रूप में URL परम प्राप्त करें।

import { Router } from '@angular/router';
constructor(private router: Router) {
    console.log(router.parseUrl(router.url));
}

Answer 10

आप केवल एक बार क्वेरी पैरामीटर प्राप्त करना चाहते हैं, सबसे अच्छा तरीका उपयोग करने के लिए है ले विधि ताकि आप सदस्यता खत्म करने के बारे में चिंता करने की जरूरत नहीं है। यहाँ सरल स्निपेट दिया गया है: -

constructor(private route: ActivatedRoute) {
  route.snapshot.queryParamMap.take(1).subscribe(params => {
     let category = params.get('category')
     console.log(category);
  })
}

नोट: यदि आप भविष्य में पैरामीटर मानों का उपयोग करना चाहते हैं, तो निकालें (1) को हटा दें ।

Answer 11

अब यह है:

this.activatedRoute.queryParams.subscribe((params: Params) => {
  console.log(params);
});

Comments

इस कोड स्निपेट के लिए धन्यवाद, जो कुछ सीमित अल्पकालिक सहायता प्रदान कर सकता है। एक उचित व्याख्या यह दर्शाती है कि समस्या का एक अच्छा समाधान क्यों है, यह दिखा कर इसके दीर्घकालिक मूल्य में बहुत सुधार होगा और यह भविष्य के पाठकों को अन्य, इसी तरह के सवालों के साथ अधिक उपयोगी बना देगा। कृपया कुछ स्पष्टीकरण जोड़ने के लिए अपने उत्तर को संपादित करें, जिसमें आपके द्वारा की गई धारणाएं शामिल हैं

— शॉन सी।

Answer 12

मुझे उम्मीद है कि यह किसी और की मदद करेगा।

ऊपर दिए गए प्रश्न में कहा गया है कि पृष्ठ को पुनर्निर्देशित करने के बाद क्वेरी परम वैल्यू की आवश्यकता है और हम मान सकते हैं कि स्नैपशॉट मान (नो-ऑब्जर्वेबल विकल्प) पर्याप्त होगा।

यहां किसी ने भी आधिकारिक दस्तावेज से स्नैपशॉट.paramMap.get के बारे में उल्लेख नहीं किया है ।

this.route.snapshot.paramMap.get('id')

इसलिए भेजने से पहले इसे भेजने / पुनः-निर्देशन घटक में जोड़ें:

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

फिर (जैसे यहां प्रलेखित ) फिर से निर्देशित करें :

this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);

या केवल:

this.router.navigate(['/heroes', heroId ]);

सुनिश्चित करें कि आपने इसे अपने रूटिंग मॉड्यूल में यहां दस्तावेज के रूप में जोड़ा है :

 { path: 'hero/:id', component: HeroDetailComponent }

और अंत में, आपके घटक में जिसे क्वेरी परम का उपयोग करने की आवश्यकता है

• आयात जोड़ें ( यहाँ प्रलेखित ):

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

• इंजेक्टेड एक्टिवेटआउट

(प्रलेखन स्विचपाउट का आयात भी करता है और राउटर और हीरो सर्विस को भी इंजेक्ट करता है - लेकिन वे केवल अवलोकन योग्य विकल्प के लिए आवश्यक हैं - जब आप हमारे मामले में स्नैपशॉट विकल्प का उपयोग करते हैं तो उनकी आवश्यकता नहीं होती है):

    constructor(
      private route: ActivatedRoute
    ) {}

• और वह मूल्य प्राप्त करें जिसकी आपको आवश्यकता है ( यहां दस्तावेज दिया गया है ):

  ngOnInit() {
    const id = this.route.snapshot.paramMap.get('id');
  }

नोट: यदि आप एक नए मॉडल में प्रवेश-माप का उपयोग करते हैं (जैसे कि डाक्यूमेंटेशन में हैं) तो APPMODULE.ts में यह सुनिश्चित करें कि निम्नलिखित मॉड्यूल को प्राप्त करें AppRoutModule (या रूट-स्तर ऐप रूट के साथ अन्य फ़ाइल) में आयात करें: []। अन्य फ़ीचर फ़ुटबॉल नहीं होंगे (जैसा कि वे आएंगे {{: ', redirectTo:' / not-found ') और आप केवल नहीं मिला संदेश देखेंगे।

Answer 13

आपको बस कंस्ट्रक्टर में ActivatedRoute को इंजेक्ट करना होगा और फिर इसके ऊपर सिर्फ params या queryParams को एक्सेस करना होगा

constructor(private route:ActivatedRoute){}
ngOnInit(){
        this.route.queryParams.subscribe(params=>{
        let username=params['username'];
      });
 }

कुछ मामलों में यह NgOnInit में कुछ भी नहीं देता है ... हो सकता है कि इस मामले में परम की आरंभीकरण से पहले init कॉल के कारण आप इसे फ़ंक्शन डेब्यू टाइमटाइम (1000) द्वारा कुछ समय तक प्रतीक्षा करने के लिए कह सकते हैं

जैसे =>

 constructor(private route:ActivatedRoute){}
    ngOnInit(){
            this.route.queryParams.debounceTime(100).subscribe(params=>{
            let username=params['username'];
          });
     }

debounceTime () किसी अन्य स्रोत उत्सर्जन के बिना विशेष समय अवधि के बाद ही स्रोत से अवलोकन योग्य मान का उत्सर्जन करता है

Answer 14

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

यहाँ मैं उपयोग किया गया कोड है:

let re = /[?&]([^=#&]+)=([^&#]*)/g;
let match;
let isMatch = true;
let matches = [];
while (isMatch) {
    match = re.exec(window.location.href);
    if (match !== null) {
        matches[decodeURIComponent(match[1])] = decodeURIComponent(match[2]);
        if (match.index === re.lastIndex) {
            re.lastIndex++;
        }
    }
    else {
        isMatch = false;
    }
}
console.log(matches);

Answer 15

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

यदि आपके पास https://myapp.com/owner/123/show?height=23 जैसा url है तो उपयोग करें

combineLatest( [this.route.paramMap, this.route.queryParamMap] )
  .subscribe( ([pathParams, queryParams]) => {
    let ownerId = pathParams.get('ownerId');    // =123
    let height  = queryParams.get('height');    // =height
    // ...
  })

अपडेट करें

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

this.router.navigateByUrl(yourUrl);