কৌণিক: রুট পরিবর্তন না করে কীভাবে ক্যোয়ারীপ্যারাম আপডেট করবেন

Question

আমি কোনও উপাদান থেকে ক্যোয়ারীপ্যারামগুলি আপডেট (যুক্ত, অপসারণ) করার চেষ্টা করছি। কৌণিক জেএসে এটি সম্ভাব্য ধন্যবাদ থাকত:

$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

আমি ব্যবহার করতে হয়েছে []পরিবর্তে ['.']এটি কাজ করা

— জেইমি গোমস

ক্যোয়ারাপ্যারামগুলি ব্যবহার করতে হবে ['સંબંધિતTo'] = this. ਐਕটিভেটেডরউট; বর্তমান পৃষ্ঠার সাথে নেভিগেশন আপেক্ষিক করতে

— ক্লোনক

ওপির সমস্যা সমাধানের জন্য দুর্দান্ত সমাধান। যা কিছু আপনার কাছে পাওয়া যায় না, যদি না আমি কিছু মিস করি, তা হ'ল আপনার বর্তমান পৃষ্ঠার ইতিহাসে পিছিয়ে এবং এগিয়ে যাওয়ার দক্ষতা (যেমন পরিবর্তিত ফিল্টার বা অর্ডার 5 বার, প্রত্যেকের নিজস্ব URL রয়েছে তবে একই উপাদান রয়েছে) এবং এতে রয়েছে পৃষ্ঠার বিষয়বস্তু প্রদর্শিত হয় যদি আপনি সরাসরি এই 5 টি ইউআরএল অ্যাক্সেস করেন তবে তা কেমন হয়। আমি মনে করি আপনি this.activatedRoute.queryParams.subscribeনিজের উপাদানগুলির মাধ্যমে ম্যানুয়ালি এটি সম্পাদন করতে এবং বিভিন্ন আপডেট করতে পেরেছিলেন , তবে কেবল এই পথটি লোড করার জন্য একটি সাধারণ কৌণিক উপায় আছে যে পিছনে এবং সামনের দিকে স্বয়ংক্রিয়ভাবে কাজ করবে?

— jmq

রাউটার.নভিগেট ব্যবহার করার সময় এটি উইন্ডোটির শীর্ষে স্ক্রোল করবে, কোনও ধারণা কীভাবে এটি নিষ্ক্রিয় করবেন?

— Hese

@ হিজ, আপনি কি নিশ্চিত? আমার মনে হয় না এটি শীর্ষে যাবে। দয়া করে এই উদাহরণটি একবার দেখুন: stackblitz.com/edit/angular-sdtsew?file=src/app/…

— রেডোসো রোজকোইয়াক

Answer 2

@ রডোসো রোজকোইয়াকের উত্তর relativeTo: this.routeনীচের হিসাবে প্রয়োজনীয় ব্যতীত প্রায় সঠিক :

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

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

Answer 3

কৌণিক 5 এ আপনি বর্তমান ইউআরএলকে বিশ্লেষণ করে খুব সহজেই urlTree এর অনুলিপিটি পেতে এবং সংশোধন করতে পারেন । এটিতে ক্যোয়ারী প্যারাম এবং টুকরা অন্তর্ভুক্ত থাকবে।

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

  this.router.navigateByUrl(urlTree); 

কোয়েরি প্যারামিটারটি সংশোধন করার "সঠিক উপায়" সম্ভবত নীচের মতো ক্রিয়েটআরল ট্রি সহ যা আমাদের নেভিগেশনএক্সট্রাস ব্যবহার করে এটি সংশোধন করার সময় বর্তমান থেকে একটি নতুন 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

— Drenai

Answer 4

চেষ্টা

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

একক উদ্ধৃতি ব্যতীত একই রুট নেভিগেশনের জন্য কাজ করবে।

Comments

আমি এই সঠিক জিনিস খুঁজছিলাম। ধন্যবাদ!!!

— cevaris

Answer 5

বেশিরভাগ ভোটের উত্তর আমার পক্ষে আংশিকভাবে কাজ করেছিল। ব্রাউজার ইউআরএল একই থাকে তবে আমার 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());
  }
}

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

এবং this._router.url.split("?")[0], হ'ল বর্তমান ইউআরএল থেকে সমস্ত পূর্ববর্তী ক্যোয়ারী স্ট্রিং সরিয়ে ফেলতে হবে।

Comments

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত, রাউটার.ন্যাভিগেটস এনজিওনিটকে রিফ্রেশও করে, লোকেশন.গো এটি করে না! এটি সত্যিই গুরুত্বপূর্ণ কারণ যদি আপনার উপাদানটি কিছু এনজিওনিট লজিক (এইচটিটিপি কল ইত্যাদি) করে তবে আপনি রাউটার.ন্যাভিগেট ব্যবহার করার সময় তারা আবার কল হবে। আপনি এটি চান না।

— ড্যানি হোয়েভ

আপনার কেবল রাউটারের দরকার নেই কেন? this.location.path().split...ভাল না ?

— ভ্লাদিমির

@ ভ্লাদিমির আপনি ঠিকই বলেছেন, আমি এটি আমার উপাদানগুলিতে অন্য উদ্দেশ্যে ব্যবহার করছিলাম, সুতরাং এটি কেবল তার পক্ষে ছিল না। যদিও আমার কাছে বৈধতা দেওয়ার সময় নেই।

— moi_meme

উদাহরণস্বরূপ প্রচার বা গুগল ট্র্যাকিং পরামিতিগুলির জন্য আপনি কোয়েরি প্যারামিটারগুলি সংরক্ষণ করতে চাইলে এটি কাজ করবে না

— জন টিনসম্যান

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

আপনি যদি রুট পরিবর্তন না করেই ক্যোয়ারী প্যারামগুলি পরিবর্তন করতে চান। নীচে দেখুন উদাহরণ আপনাকে সহায়তা করতে পারে: বর্তমান রুটটি হ'ল: / অনুসন্ধান এবং টার্গেট রুটটি (পুনরায় লোড পৃষ্ঠা ছাড়াই): / অনুসন্ধান? কোয়েরি = প্রেম

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

দয়া করে নোট করুন: আপনি this.router.navigate (['।'] ] এর পরিবর্তে this.router.navigate (['অনুসন্ধান']] ব্যবহার করতে পারেন

Comments

আমি নিশ্চিত নই যে [[]] এর চেয়ে আরও ভাল পদ্ধতির relativeTo:, তবে .then()সহায়ক ছিল - নেভিগেট () কোনও প্রতিশ্রুতি ফিরিয়ে দিয়েছিল তা অবগত ছিল না, তাই আপনি যে পোস্ট করেছেন তাতে আনন্দিত!

— ড্রেনাই

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, দিন এবং ক্যোয়ারী প্যারাম হিসাবে নাম সহ এবি পৃষ্ঠায় পুনঃনির্দেশ করবে

   this।

   এটি তিনটি ক্যোয়ারী প্যারামিটার সহ "এবিসি" রুটে ক্যোয়ারী প্যারামগুলি আপডেট করবে

ক্যোয়ারী প্যারামগুলি আনার জন্য: -

    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
    }