কৌণিক 2 এ পুনরায় লোড না করে রুটের প্যারামগুলি পরিবর্তন করুন

Question

আমি অ্যাংুলার 2, গুগল ম্যাপস ইত্যাদি ব্যবহার করে একটি রিয়েল এস্টেট ওয়েবসাইট তৈরি করছি এবং যখন কোনও ব্যবহারকারী মানচিত্রের কেন্দ্র পরিবর্তন করে আমি মানচিত্রের বর্তমান অবস্থান পাশাপাশি ব্যাসার্ধ নির্দেশ করে এমন API এ অনুসন্ধান করি। জিনিসটি হ'ল, আমি পুরো পৃষ্ঠাটি পুনরায় লোড না করেই url এ সেই মানগুলি প্রতিবিম্বিত করতে চাই। এটা কি সম্ভব? আমি AngularJS 1.x ব্যবহার করে কিছু সমাধান খুঁজে পেয়েছি তবে Angular 2 সম্পর্কে কিছুই নেই।

Comments

আমি মনে করি আপনি যদি [রাউটারলিঙ্ক] = "['/ রুট', {প্যারাম 1: মান 1}] ব্যবহার করেন তবে এটি পৃষ্ঠাটি পুনরায় লোড করবে না

— টুলকিট

তবে আমি কীভাবে অন্য ক্যোয়ারী প্যারামিটার যুক্ত করতে পারি?

— টুলকিট

☝️ এটি কোনও পৃষ্ঠা পুনরায়

— লোডের

কেবল একটি নোট যে আপনি যদি আপনার সাইটের এসইও সামঞ্জস্যপূর্ণ করতে এসএসআর ব্যবহার করেন তবে এটি একটি সমস্যা oot

— জোনাথন

@ জোনাথন, তাই না? যেহেতু স্থূল পৃষ্ঠাটি রেন্ডার হওয়ার পরে অ্যাংুলার রাউটিংয়ের উপরে নেয়, আমি এসএসআর ব্যবহার করার পরেও এটি এখনও একটি বৈধ প্রশ্ন মনে করব।

— adam0101

Answer 1

আপনি ব্যবহার করতে পারেন location.go(url)যা আবেদনের রুটে পরিবর্তন ছাড়াই মূলত আপনার ইউআরএল পরিবর্তন করবে।

দ্রষ্টব্য এটির ফলে চলমান রুট থেকে শিশু রুটে পুনর্নির্দেশের মতো অন্যান্য প্রভাবের কারণ হতে পারে।

সম্পর্কিত প্রশ্ন যা বর্ণনা করে তাতেপরিবর্তনগুলিlocation.goঘনিষ্ঠ হবে নাRouter।

Comments

আমার রুটে 'অনুসন্ধান' নামে একটি প্যারামিটার রয়েছে যাতে অনুসন্ধান ক্ষেত্রগুলির ক্রমিক সংস্করণ প্রাপ্ত হয়, যখন প্রথমবারের জন্য তালিকার রাষ্ট্রটি লোড হয় আমি কেবল এই পরামিতিগুলি এই ব্যবহার করে পড়ি __আরউপরপ্যারামস.জেট ('অনুসন্ধান'), ফিল্টারগুলি ডিসরিয়ালাইজ করুন এবং অনুসন্ধান সম্পাদন। যদি ব্যবহারকারী অনুসন্ধান ক্ষেত্রগুলি পরিবর্তন করে, হয় মানচিত্র বা অনুসন্ধানের দিকগুলি ব্যবহার করে, আমি কেবল রাউটারের ভেরি নির্দেশিকা = এই.আরউটার.জেনারেটের পদ্ধতিটি তৈরি করে সঠিক url তৈরি করি (['তালিকাবদ্ধকরণ', {অনুসন্ধান: সিরিয়ালাইজডফিল্ডস}]) ) এবং তারপরে রাষ্ট্রটিকে পুনরায় লোড না করে url পরিবর্তন করার জন্য this._location.go (instication.urlPath) ব্যবহার করুন।

— মার্কোস বাসুয়ালদো

যদি অন্য কেউ ভাবছেন: 'কৌণিক 2 / প্ল্যাটফর্ম / সাধারণ' থেকে {অবস্থান import আমদানি করুন;

— কেসারিওন

import { Location } from '@angular/common';কৌণিক 4

— তেহসিভিলিয়ান

আপনি কি কনস্ট্রাক্টরের মতো সজ্জা করেছেনconstructor(private location: Location){ }

— পঙ্কজ পার্কার

@ অ্যাড্রিয়ানই সমস্যাটি সম্ভবত আপনার টাইপ করার location.go()সময় সম্ভবত টাইপ করা উচিত this.location.go()। আপনি যখন নির্গত হন this., আপনি টাইপস্ক্রিপ্টের অবস্থান-ইন্টারফেস কল করেন।

— জর্জি-আন

Answer 2

আরসি of অনুসারে আপনি পরিবর্তন স্থিতি ছাড়াই ইউআরএল পরিবর্তন করতে এবং এর মাধ্যমে আপনার রুটের ইতিহাস রক্ষা করতে নিম্নলিখিতগুলি করতে পারেন

import {OnInit} from '@angular/core';

import {Location} from '@angular/common'; 
// If you dont import this angular will import the wrong "Location"

@Component({
  selector: 'example-component',
  templateUrl: 'xxx.html'
})
export class ExampleComponent implements OnInit
{
  constructor( private location: Location )
  {}

  ngOnInit()
  {    
    this.location.replaceState("/some/newstate/");
  }
}

Comments

এটি আমার পক্ষে কাজ করে না। এটি বেষ্টন করে রুটটি লোড করার চেষ্টা করে। কনসোল ত্রুটি:Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'some/newstate'

— ইনিগো

@ গলফাদাসের পরামর্শ অনুসারে এটি ইউআরএল তৈরির সাথে একত্রিত করুন এবং আমাদের একটি বিজয়ী আছে!

— কাকম্যাগনম্বম্ব

Answer 3

ব্যবহার location.go(url)হ'ল উপায়, তবে ইউআরএলকে হার্ডকডিংয়ের পরিবর্তে এটি ব্যবহার করে উত্পন্ন করার বিষয়টি বিবেচনা করুন router.createUrlTree()।

আপনি নিম্নলিখিত রাউটার কলটি করতে চান তা দেওয়া হয়েছে: this.router.navigate([{param: 1}], {relativeTo: this.activatedRoute})তবে উপাদানটি পুনরায় লোড না করে এটি পুনরায় লেখা যেতে পারে:

const url = this.router.createUrlTree([], {relativeTo: this.activatedRoute, queryParams: {param: 1}}).toString()

 this.location.go(url);

Comments

এই উত্তরটি আমার সমস্যার সমাধান করেছে। একটি প্রশ্ন, উপরে উত্পন্ন ইউআরএল ";" (সেমিকোলন) দ্বারা সীমিত পরামিতি রয়েছে। "&" দিয়ে ক্যোয়ারীর প্রতিটি পরামিতি আলাদা করতে আমাদের কী করা উচিত?

— অমরনাথ

এটি ক্রিয়েটআরলট্রি (কমান্ড: যে কোনও [], নেভিগেশনএক্সট্রা ?: নেভিগেশনএক্সট্রা) এর ঘোষণা। আপনাকে কোয়েরিপ্যারামগুলি ব্যবহার করতে হবে অবস্থিত নেভিগেশনএক্সট্রা কমড নয়। createUllTree ([]], {আপেক্ষিকটি: এই.একটিভেটেড রুট, ক্যোয়ারীপ্যারামস: {পরম: 1}})

— কিট

@ কিট কী বলেছে কেবল তা স্পষ্ট করতে, এটি করুন:this.router.createUrlTree([], {relativeTo: this.activatedRoute, queryParams: {param: 1}}).toString()

— ব্লুগ্রাউন্ডস

Answer 4

আমার মত কারও জন্য এই প্রশ্নটি সন্ধান করার জন্য নিম্নলিখিতটি কার্যকর হতে পারে।

আমারও অনুরূপ সমস্যা হয়েছিল এবং প্রাথমিকভাবে এখানে অন্য উত্তরের পরামর্শ অনুসারে লোকেশন.গো এবং লোকেশন.রেপসস্টেট ব্যবহার করার চেষ্টা করেছি। তবে আমি সমস্যার মধ্যে পড়েছিলাম যখন আমাকে অ্যাপের অন্য পৃষ্ঠায় নেভিগেট করতে হয়েছিল কারণ ন্যাভিগেশনটি বর্তমান রুটের সাথে সম্পর্কিত ছিল এবং বর্তমান রুটটি লোকেশন.গো বা লোকেশন.র্লেসস্টেট দ্বারা আপডেট করা হয়নি (রাউটারটি কিছুই জানে না) এগুলি ইউআরএল-এ কী করবে)

সংক্ষেপে আমার একটি সমাধানের দরকার ছিল যা রুট প্যারামিটার পরিবর্তিত হলে পৃষ্ঠা / উপাদানটি পুনরায় লোড না করে তবে অভ্যন্তরীণভাবে ডিআইডি রুট রাষ্ট্র আপডেট করে।

আমি ক্যোয়ারী প্যারামিটারগুলি ব্যবহার করে শেষ করেছি। আপনি এটি সম্পর্কে এখানে আরও জানতে পারেন: https://angular-2-training-book.rangle.io/handout/routing/query_params.html

সুতরাং আপনার যদি কোনও অর্ডার সংরক্ষণ এবং অর্ডার আইডি পাওয়ার মতো কিছু করার দরকার হয় তবে আপনি নীচের চিত্রের মতো আপনার পৃষ্ঠার ইউআরএল আপডেট করতে পারেন। কোনও মানচিত্রে একটি কেন্দ্রের অবস্থান এবং সম্পর্কিত ডেটা আপডেট করা একই রকম হবে

// let's say we're saving an order. Initally the URL is just blah/orders
save(orderId) {
    // [Here we would call back-end to save the order in the database]

    this.router.navigate(['orders'], { queryParams: { id: orderId } });
    // now the URL is blah/orders?id:1234. We don't reload the orders
    // page or component so get desired behaviour of not seeing any 
    // flickers or resetting the page.
}

এবং আপনি এটি এনজিওনাইট পদ্ধতিতে যেমন ট্র্যাক করে রাখেন:

ngOnInit() {
    this.orderId = this.route
        .queryParamMap
        .map(params => params.get('id') || null);
    // orderID is up-to-date with what is saved in database now, or if
    // nothing is saved and hence no id query paramter the orderId variable
    // is simply null.
    // [You can load the order here from its ID if this suits your design]
}

আপনার যদি নতুন (অরক্ষিত) অর্ডার দিয়ে অর্ডার পৃষ্ঠায় সরাসরি যেতে হয় তবে আপনি যা করতে পারেন:

this.router.navigate(['orders']);

বা যদি আপনাকে কোনও বিদ্যমান (সংরক্ষিত) আদেশের জন্য অর্ডার পৃষ্ঠায় সরাসরি যেতে হয় তবে আপনি যা করতে পারেন:

this.router.navigate(['orders'], { queryParams: { id: '1234' } });

Answer 5

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

import {OnInit} from '@angular/core';
import {Location} from '@angular/common';

@Component({
  selector: 'example-component',
  templateUrl: 'xxx.html'
})
export class ExampleComponent implements OnInit
{
  constructor( private location: Location )
  {}

  ngOnInit()
  {    
    this.location.go( '/example;example_param=917' );
  }
}

এই বিষয়ে কৌনিক সংস্থানগুলি এখানে: https://angular.io/docs/ts/latest/api/common/index/Location-class.html https://angular.io/docs/ts/latest/api/ সাধারণ / সূচক / LocationStrategy-class.html

Answer 6

আমি এটি পেতে এই উপায় ব্যবহার:

const queryParamsObj = {foo: 1, bar: 2, andThis: 'text'};

this.location.replaceState(
  this.router.createUrlTree(
    [this.locationStrategy.path().split('?')[0]], // Get uri
    {queryParams: queryParamsObj} // Pass all parameters inside queryParamsObj
  ).toString()
);

- সম্পাদনা -

আমি মনে করি এটির জন্য আমার আরও কিছু তথ্য যুক্ত করা উচিত।

আপনি যদি this.location.replaceState()নিজের অ্যাপ্লিকেশনটির রাউটার ব্যবহার করেন তবে আপডেট হয় না, তাই আপনি যদি পরে রাউটার তথ্য ব্যবহার করেন তবে এটি আপনার ব্রাউজারে এটির সমান নয়। উদাহরণস্বরূপ আপনি যদি localizeServiceভাষা পরিবর্তন করতে ব্যবহার করেন তবে ভাষার পরিবর্তনের পরে আপনার অ্যাপ্লিকেশনটি শেষ ইউআরএল ফিরে করুন যেখানে আপনি এটির আগে পরিবর্তন করেছিলেন this.location.replaceState()।

আপনি যদি এই আচরণটি না চান তবে আপনি আপডেট URL এর জন্য আলাদা পদ্ধতি বেছে নিতে পারেন, যেমন:

this.router.navigate(
  [this.locationStrategy.path().split('?')[0]],
  {queryParams: queryParamsObj}
);

এই বিকল্পে আপনার ব্রাউজারটিও রিফ্রেশ করে না তবে আপনার URLপরিবর্তনটি Routerআপনার অ্যাপ্লিকেশনটিতেও প্রবেশ করা হয়, সুতরাং যখন আপনি ভাষা পরিবর্তন করেন তখন আপনার মতো সমস্যা হয় না this.location.replaceState()।

অবশ্যই আপনি আপনার প্রয়োজনের জন্য পদ্ধতি চয়ন করতে পারেন। প্রথমটি আরও হালকা কারণ আপনি URLব্রাউজার পরিবর্তনের চেয়ে আপনার অ্যাপ্লিকেশনকে বেশি যুক্ত করেন না ।

Answer 7

আমার জন্য এটি কৌনিক 4.4.5 এর সাথে উভয়ের মিশ্রণ ছিল।

রাউটার.নভিগেট ব্যবহার করে রিয়েলটিভটো: অ্যাক্টিভেটেড রুট অংশটিকে সম্মান না করে আমার ইউআরএল ধ্বংস করে চলেছে।

আমি এখানে দিয়ে শেষ করেছি:

this._location.go(this._router.createUrlTree([this._router.url], { queryParams: { profile: value.id } }).toString())

Answer 8

বৈশিষ্ট্য ক্যোয়ারী প্যারামস হ্যান্ডলিং ব্যবহার করুন: ইউআরএল পরিবর্তন করার সময় 'মার্জ'।

this.router.navigate([], {
        queryParams: this.queryParams,
        queryParamsHandling: 'merge',
        replaceUrl: true,
});

Comments

এটি বর্তমানে

— রুটেযুক্ত উপাদানটি