কৌণিক 5 এ ইউআরএল থেকে কোয়েরি পরামিতিগুলি কীভাবে পাবেন?

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);
}

এই ব্যক্তিগত ফাংশনটি আমাকে আমার পরামিতিগুলি পেতে সহায়তা করে, তবে আমি মনে করি না এটি নতুন কৌণিক পরিবেশে এটি সঠিক উপায়।

[আপডেট:] আমার মূল অ্যাপ্লিকেশনটি দেখে মনে হচ্ছে

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

  constructor(private route: ActivatedRoute) {}

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

Comments

আপনি রাউটার ব্যবহার করছেন? ইউআরএল কোথা থেকে আসছে?

— বিনোদ ভবানী

হ্যাঁ, একটি অ্যাক্টিভেটেড রুট করুন। আমার মূল উপাদানটি কেমন দেখাচ্ছে তা দেখাতে আমি আমার প্রশ্ন আপডেট করেছি।

— লার্স

আপনি কি আমাকে আপনার রুটটি ধ্রুবক দেখাতে পারেন, যেখানে আপনি সমস্ত রুট সেটআপ করেছেন?

— বিনোদ ভবানী

কনস্ট্রাক্ট অ্যাপরউইটস: রুটস = ​​[{পাথ: "এক", উপাদান: পেজঅোনকম্পোনেন্ট}, {পথ: "", রিডাইরেক্টটো: "/ এক", প্যাথ ম্যাচ: "পূর্ণ"}, {পথ: "**", পুনর্নির্দেশ: "/ এক"} ]; আমার রুট ধ্রুবক। আমি মূল অ্যাপ্লিকেশনটিতে সমস্ত পরামিতিগুলি এটি একটি ডিটিওতে সঞ্চয় করতে চাই, তারপরে অন্য পৃষ্ঠায় নেভিগেট করুন। পৃষ্ঠা নেভিগেশন প্রত্যাশার মতো কাজ করে তবে আমি আমার 'getQueryParameter' ফাংশন দ্বারা মূলত ক্যোয়ারির প্যারামিটারগুলি পাই। আমি আপনার প্রশ্নে বুঝতে পারি যে আমি ভুলে গিয়েছি এমন কিছু আছে exist আমার প্যারামিটারের নামগুলি কোথাও চিহ্নিত করার দরকার আছে?

— লার্স

হ্যাঁ, আপনার রুটগুলিতে আপনাকে পরামিতিগুলিও সংজ্ঞায়িত করতে হবে। যদি আপনি কৌণিক.আইও তে রাউটিং ডক্স পরীক্ষা করে থাকেন তবে দেখতে পাবেন যে তারা কোনও নির্দিষ্ট রুটে পরামিতিগুলি কীভাবে সংজ্ঞায়িত করে। এরকম কিছু {পথ: 'abc /: param1', উপাদান: घटकক্লাসনাম}

— বিনোদ ভবানী

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 ডক্স অনুসারে , অ্যাক্টিভেটেডরউট.কোয়ারিপ্যারামস এবং .params এর ব্যবহার নিরুৎসাহিত করা হয়েছে এবং ভবিষ্যতের সংস্করণগুলিতে হ্রাস করা যেতে পারে; এখানে

— গ্রীনেন

@ শুভেন্দুভাইদ ব্যাখ্যা করুন কেন, তাদের কনস্ট্রাক্টরের পরিবর্তে এনজিওইনাইট ব্যবহার করা উচিত। সেরা অনুশীলনটি পর্যবেক্ষণযোগ্য আরএক্সজেএস ব্যবহার করবে, তারপরে পর্যবেক্ষণযোগ্যদের সাথে কাজ করার সময় ঘোষিত ঘোষণামূলক পদ্ধতির ব্যবহার করবে, তারপরে এইচটিএমএলে

— অ্যাসিঙ্কটি

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"]

— ফ্লুইডগুইড

এটি আমার জন্য Angular8 এ কাজ করে। this.route.snapshot.queryParamMap কাজ করে। this.route.snapshot.paramMap আমার পক্ষে কাজ করে না।

— রোমিও প্রোফিজ্ট

Answer 3

আমি জানি যে ওপি কৌণিক 5 সমাধান চেয়েছিল, তবে এখনও আপনারা যারা এই প্রশ্নের উপর নতুন (6+) কৌণিক সংস্করণগুলির জন্য হোঁচট খায়। অ্যাক্টিভেটেডরউট.কোয়ারিপ্যারামগুলি (যা অন্যান্য উত্তরগুলির বেশিরভাগ উপর ভিত্তি করে) সম্পর্কিত দস্তাবেজের উদ্ধৃতি :

দুটি পুরানো সম্পত্তি এখনও উপলব্ধ। তারা তাদের প্রতিস্থাপনের তুলনায় কম দক্ষ, নিরুৎসাহিত, এবং ভবিষ্যতের কৌণিক সংস্করণে হ্রাস পেতে পারে ।

প্যারামস - একটি পর্যবেক্ষণযোগ্য যা রুটের সাথে নির্দিষ্ট এবং প্রয়োজনীয় alচ্ছিক পরামিতিগুলি ধারণ করে। পরিবর্তে প্যারাম্যাম্যাপ ব্যবহার করুন।

ক্যোয়ারিপ্যারামস - একটি পর্যবেক্ষণযোগ্য যাতে সমস্ত রুটের জন্য উপলব্ধ ক্যোয়ারী প্যারামিটার রয়েছে। পরিবর্তে ক্যোয়ারীপ্যারাম্যাপ ব্যবহার করুন।

দস্তাবেজের মতে , ক্যোয়ারী প্যারামগুলি পাওয়ার সহজ উপায়টি এরকম দেখতে পাবেন:

constructor(private route: ActivatedRoute) { }

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

আরও উন্নত উপায়ে (যেমন উন্নত উপাদান পুনরায় ব্যবহারের জন্য) এই ডক্স অধ্যায়টি দেখুন।

সম্পাদনা করুন:

যেমনটি নীচে মন্তব্যে সঠিকভাবে বলা হয়েছে, এই উত্তরটি ভুল - কমপক্ষে ওপি দ্বারা বর্ণিত মামলার জন্য।

ওপি বিশ্বব্যাপী ক্যোয়ারী প্যারামিটারগুলি (/ অ্যাপ্লিকেশন? প্যারাম 1 = হলো & প্যারাম 2 = 123) পেতে বলেছে; এক্ষেত্রে আপনার ক্যোয়ারীপর্মম্যাপ ব্যবহার করা উচিত (ঠিক যেমন @ দ্যাপারদান ১৯৮৫ উত্তরের মতো)।

অন্যদিকে, প্যারাম্যাপটি রুটের নির্দিষ্ট পরামিতিগুলিতে ব্যবহৃত হয় (যেমন / অ্যাপ /: প্যারাম 1 /: প্যারাম 2, ফলস্বরূপ / অ্যাপ্লিকেশন / হলো / 123)।

এটি নির্দেশ করার জন্য @ জেসনরোয়েল এবং @ ডাকাকে ধন্যবাদ।

Comments

এটি কি কোয়েরি স্ট্রিং প্যারামিটারগুলি আনতে ব্যবহার করা উচিত queryParamMapনয় paramMap?

— জেসন রয়েল

@JasonRoyle- এ দেখে মনে হচ্ছে আপনি সঠিক, paramMapকাজ করছেন না।

— ডাকা

উপরের মন্তব্য অনুসারে এই উত্তরটির সঠিক হওয়া দরকার।

— ডাকা

@ জেসনরোয়েল, ডাকা, আপনি ঠিক বলেছেন, এটিকে নির্দেশ করার জন্য আপনাকে ধন্যবাদ। উত্তরটি সংশোধন করেছেন।

— গ্রিডেন

নিখুঁত কার্যকারী কোড পাওয়া গেছে: jsonworld.com/blog/…

— সনি কুমারী

Answer 4

আপনি এইচটিপিপিরামগুলি ব্যবহার করতে পারেন , যেমন:

  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

কেবল পরিষ্কার করুন, আমার দুটি ডোমেন বিভিন্ন ভাষার সাইটে নির্দেশ করছে language লোকালহোস্ট / -> এন, লোকালহোস্ট /? ল্যাং = ফ্র -> ফরাসী। এবং আমি রাউটিং করেছেন: path: '', redirectTo: '/list' । এই.আরউটি.স্ন্যাপশটটি আমার পক্ষে কাজ করে না কারণ এটি 'ল্যাং' কোয়েরিস্ট্রিংকে সরিয়ে দেয় এমন / তালিকার পুনঃনির্দেশ করে। তবে এই সমাধানটি আমার পক্ষে কাজ করে।

— রায়ান হুয়াং

@ রায়ানহুয়াং হিসাবে আমার একই ধরণের সমস্যা রয়েছে। তবে এই সমাধানটি আমার প্রথম বিচারে কাজ করেছিল।

— 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

এটি যথেষ্ট না বলে মনে হচ্ছে, আমি অ্যাক্টিভেটেডরউটস্নাপশট পেয়েছি তবে ক্যোয়ারীপ্যারামগুলি একটি খালি অবজেক্ট, প্যারামগুলিও খালি এবং কোয়েরিপ্যারাম্যাপ.জেট ('নাম') নਾਲ রিটার্ন করে। মনে হচ্ছে এনজিওইনিট () খুব শীঘ্রই এই জাতীয় ক্যোয়ারী প্যারামিটারগুলি পাওয়া যায়।

— লার্স

আসলে আপনি যদি এই প্যারামগুলি পেতে চান তবে আপনার নিজের রুটটি পরিবর্তন করা উচিত।

— দিমিত্রি গ্রিংকো

আমার বিভিন্ন ক্রমে প্রায় 10 টি প্যারামিটার রয়েছে। সুতরাং আমি অবশ্যই নামযুক্ত ক্যোয়ারী পরামিতি ব্যবহার করা উচিত। 10 টি প্যারামিটার রয়েছে তা বুঝতে আমি কীভাবে আমার প্রধান অ্যাপকোম্পোনটেট সেট করব? url / myprogram? a = 1 & b = 2 & c = 4 ... এটি কি আমার সমস্যা আছে? আমার কি প্রতিটি প্যারামিটারকে অন্য উপাদানগুলিতে রুট করা দরকার? আমি আশা করি না.

— লার্স

আপনি কি এটি চেষ্টা করেছেন? this.route.snapshot.queryPramMap

— দিমিত্রি গ্রিঙ্কো

@ দিমিত্রিগ্রিঙ্ক কোনও রুটে কোনও সত্তা আইডি লাগানো কোনও খারাপ প্যাটার্ন নয়, এটি একটি বিশদ দৃশ্যের সাথে একটি গভীর লিঙ্কের অনুমতি দেয়।

— কার্ল

Answer 6

এটি আমার জন্য কাজ:

constructor(private route: ActivatedRoute) {}

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

আরও বিকল্প দেখুন কীভাবে কৌনিক 2 তে ইউআরএল থেকে ক্যোয়ারী প্যারামগুলি পাবেন?

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)

Https://myapp.com/user/666/read?age=23 ব্যবহারের মতো url এর জন্য

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

ধন্যবাদ কমিল কিয়েসজেউসকি, আপনি আমার দিনটি বাঁচান

— টান

Answer 9

দুর্ভাগ্যক্রমে, সবচেয়ে পরিষ্কার সমাধান সবচেয়ে বর্ধিত সমাধান নয়। অ্যাঙ্গুলারের সাম্প্রতিক সংস্করণগুলিতে, অন্যান্য জবাবগুলিতে এটি প্রস্তাবিত হয় যে আপনি অ্যাক্টিভেটরউট ইনজেকটিবেল এবং স্ন্যাপশটের সম্পত্তিটি বিশেষত ব্যবহার করে সহজেই ক্যোয়ারী প্যারামগুলি পেতে পারেন:

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

বা সাবস্ক্রাইব সম্পত্তি (এমন ক্ষেত্রে ব্যবহৃত হয় যেখানে ক্যোয়ারী স্ট্রিং আপডেট হবে, যেমন ব্যবহারকারী আইডির মাধ্যমে নেভিগেট):

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

আমি এখানে আপনাকে বলছি যে এই সমাধানগুলির একটি ফাঁকফোকর রয়েছে যা কিছু সময়ের জন্য সমাধান করা হয়নি: https://github.com/angular/angular/issues/12157

সব মিলিয়ে একমাত্র বুলেট প্রুফ সমাধানটি হ'ল পুরাতন ভ্যানিলা জাভাস্ক্রিপ্ট ব্যবহার করা। এই ক্ষেত্রে, আমি ইউআরএল ম্যানিপুলেশনের জন্য একটি পরিষেবা তৈরি করেছি:

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

কৌণিক রাউটার পদ্ধতি প্রদান করে (: STRING URL) parseUrl যে পার্স ইউআরএলকে UrlTree । UrlTree এর অন্যতম বৈশিষ্ট্য হল ক্যোয়ারাপ্যারাম ms সুতরাং আপনি এই জাতীয় মত করতে পারেন:

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

Comments

দয়া করে বিভিন্ন প্রশ্নের একাধিক অভিন্ন উত্তর পোস্ট করবেন না। এই অনুশীলন সম্পর্কে এখানে

— ডেভিড বাক

আপনার যদি ইউআরএল পরিবর্তনের সাথে ডিল করার প্রয়োজন না হয় তবে এটি ব্যবহার করুন, যেমন প্যারামিটারগুলি বর্তমান ইউআরএলটিতে ইতিমধ্যে উপলব্ধ। অন্যথায় এটি পর্যবেক্ষণযোগ্য উপায়ে করুন।

— টম

Answer 11

আপনার যখন কোনও খালি রুটের অবজেক্ট থাকে, তখন এটি মূলত আপনি নিজের app.componal.html এ রাউটার-আউটলেট ব্যবহার করেন না এমন কারণে হয়।

এগুলি ব্যতীত, আপনি খালি খালি সাবওবজেক্টস, বিশেষত প্যারাম এবং কোয়েরিপ্যারামগুলি সহ কোনও অর্থবহ রুট অবজেক্ট পেতে সক্ষম হবেন না।

<router-outlet><router-outlet>আপনার কল করার আগে যুক্ত করার চেষ্টা করুন <app-main-component></app-main-component>

তার আগে, আপনার অ্যাপ্লিকেশন রাউটিং> যা অ্যাপ উপাদান দ্বারা ব্যবহৃত শ্রেণীর রুট রফতানি করে আপনার ক্যোয়ারী পরম প্রস্তুত রয়েছে তা নিশ্চিত করুন:

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

শেষ কথা, আপনার পরম পেতে, আমি ব্যক্তিগতভাবে ব্যবহার করি this.route.snapshot.params.dynamicParamযেখানে আপনার অ্যাপ-রাউটিং উপাদানটিতে ডায়নামিকাম নামটি ব্যবহৃত হয় :)

Answer 12

আপনার রুটগুলি সম্পর্কে সতর্কতা অবলম্বন করুন। একটি "redirectTo" সরিয়ে ফেলবে | যে কোনও প্রশ্নের প্যারামিটারটি ফেলে দেবে।

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},

এবং এখন আমার ক্যোয়ারি প্যারামিটারগুলি মূল উপাদানগুলি এনজিওইনাইটে এবং পেজওকোনম্পোনেন্টে অ্যাক্সেসযোগ্য।

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: // স্থানীয় হোস্ট: 4200 / পণ্য অর্ডার জনপ্রিয় =

আমরা এই জাতীয় অর্ডার ক্যোয়ারী পরম অ্যাক্সেস করতে পারি:

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

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

এছাড়াও রয়েছে প্যারামম্যাপের ক্যোয়ারী, যা প্যারামম্যাপ অবজেক্টের সাথে পর্যবেক্ষণযোগ্য ফিরিয়ে দেয়।

নিম্নলিখিত রুটের ইউআরএল দেওয়া হয়েছে:

HTTP: // স্থানীয় হোস্ট: 4200 / পণ্য অর্ডার জনপ্রিয় & ফিল্টার = নতুন =

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

উত্স - https://alligator.io/angular/query-paraters/

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