Angular: วิธีอัปเดต queryParams โดยไม่ต้องเปลี่ยนเส้นทาง

ฉันกำลังพยายามอัปเดต (เพิ่มลบ) queryParams จากส่วนประกอบ ใน angularJS มันเคยเป็นไปได้ด้วย:

$location.search('f', 'filters[]'); // setter
$location.search()['filters[]'];    // getter

ฉันมีแอพที่มีรายการที่ผู้ใช้สามารถกรองสั่งซื้อ ฯลฯ และฉันต้องการตั้งค่าใน queryParams ของ url ตัวกรองทั้งหมดที่เปิดใช้งานเพื่อให้เขาสามารถคัดลอก / วาง url หรือแชร์กับคนอื่นได้

อย่างไรก็ตามฉันไม่ต้องการให้โหลดหน้าซ้ำทุกครั้งที่เลือกตัวกรอง

สิ่งนี้ใช้ได้กับเราเตอร์ใหม่หรือไม่?

คุณสามารถนำทางไปยังเส้นทางปัจจุบันด้วยพารามิเตอร์การสืบค้นใหม่ซึ่งจะไม่โหลดหน้าเว็บของคุณซ้ำ แต่จะอัปเดตพารามิเตอร์การสืบค้น

สิ่งที่ต้องการ (ในส่วนประกอบ):

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

การตั้งค่าพารามิเตอร์ใหม่เป็นnullจะลบพารามิเตอร์ออกจาก URL

คำตอบของ @ Radosław Roszkowiak เกือบจะถูกต้องยกเว้นที่relativeTo: this.routeจำเป็นดังต่อไปนี้:

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

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

ใน Angular 5 คุณสามารถรับและแก้ไขสำเนาของurlTreeได้อย่างง่ายดายโดยการแยกวิเคราะห์ url ปัจจุบัน ซึ่งจะรวมพารามิเตอร์และส่วนย่อยของแบบสอบถาม

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

  this.router.navigateByUrl(urlTree); 

ว่า "วิธีที่ถูกต้อง" ในการปรับเปลี่ยนพารามิเตอร์การค้นหาน่าจะเป็นกับ createUrlTreeเช่นนี้ซึ่งจะสร้าง UrlTree ใหม่จากปัจจุบันในขณะที่ให้เราปรับเปลี่ยนโดยใช้NavigationExtras

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

เพื่อที่จะเอาแบบสอบถามพารามิเตอร์วิธีนี้คุณสามารถตั้งค่าให้หรือundefinednull

ลอง

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

จะทำงานสำหรับการนำทางในเส้นทางเดียวกันนอกเหนือจากเครื่องหมายคำพูดเดี่ยว

คำตอบที่มีการโหวตส่วนใหญ่ใช้ได้ผลกับฉันบางส่วน URL ของเบราว์เซอร์ยังคงเหมือนเดิม แต่ของฉันใช้งานrouterLinkActiveไม่ได้อีกต่อไปหลังจากการนำทาง

วิธีแก้ปัญหาของฉันคือใช้ lotation.go:

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

ฉันใช้ HttpParams เพื่อสร้างสตริงการสืบค้นเนื่องจากฉันใช้มันเพื่อส่งข้อมูลด้วย httpClient อยู่แล้ว แต่คุณสามารถสร้างมันเองได้

และthis._router.url.split("?")[0]คือการลบสตริงการสืบค้นก่อนหน้าทั้งหมดออกจาก url ปัจจุบัน

ฉันลงเอยurlTreeด้วยการรวมกับlocation.go

const urlTree = this.router.createUrlTree([], {
       relativeTo: this.route,
       queryParams: {
           newParam: myNewParam,
       },
       queryParamsHandling: 'merge',
    });

    this.location.go(urlTree.toString());

ไม่แน่ใจว่าtoStringอาจทำให้เกิดปัญหาได้หรือไม่ แต่น่าเสียดายที่location.goดูเหมือนจะเป็นสตริง

หากคุณต้องการเปลี่ยนพารามิเตอร์การสืบค้นโดยไม่ต้องเปลี่ยนเส้นทาง ดูตัวอย่างด้านล่างอาจช่วยคุณได้: เส้นทางปัจจุบันคือ: / search & Target route is (without reload page): / search? query = love

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

โปรดทราบ: คุณสามารถใช้this.router.navigate (['search']แทนthis.router.navigate (['.']

ขั้นแรกเราต้องนำเข้าโมดูลเราเตอร์จากเราเตอร์เชิงมุมและประกาศชื่อนามแฝง

import { Router } from '@angular/router'; ---> import
class AbcComponent implements OnInit(){
constructor(
    private router: Router ---> decalre alias name
  ) { }
}

1. คุณสามารถเปลี่ยนพารามิเตอร์การสืบค้นได้โดยใช้ฟังก์ชัน "router.navigate" และส่งผ่านพารามิเตอร์การสืบค้น

this.router.navigate([], { queryParams: {_id: "abc", day: "1", name: "dfd"} 
});

จะอัปเดตพารามิเตอร์การสืบค้นในเส้นทางที่เปิดใช้งานเช่นปัจจุบัน

2. ด้านล่างนี้จะเปลี่ยนเส้นทางไปยังหน้า abc โดยมี _id, วันและชื่อเป็นพารามิเตอร์ข้อความค้นหา

   this.router.navigate (['/ abc'], {queryParams: {_id: "abc", วัน: "1", ชื่อ: "dfd"}});

   จะอัปเดตพารามิเตอร์การสืบค้นในเส้นทาง "abc" พร้อมกับพารามิเตอร์แบบสอบถามสามตัว

สำหรับการดึงพารามิเตอร์แบบสอบถาม: -

    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
    }