جافاسكريبت - أنجولار إزالة معلمة الاستعلام

كيف يمكنني إزالة معلمة استعلام من عنوان URL؟ على سبيل المثال من www.expample.com/home?id=123&pos=sd&sd=iii إلى www.expample.com/home?id=123&sd=iii

تعديل: هذه هي نسختي:

this.activatedRoute.queryParams.subscribe(c => {
  const params = Object.assign({}, c);
  delete params.dapp;
  this.router.navigate([], { relativeTo: this.activatedRoute, queryParams: params });
}).unsubscribe();

الإجابة رقم 1

يمكنك إزالة معلمة استعلام باستخدام خيار merge من queryParamsHandling وتمرير null لأي معلمات ترغب في إزالتها.

// Remove query params
this.router.navigate([], {
  queryParams: {
    'yourParamName': null,
    'youCanRemoveMultiple': null,
  },
  queryParamsHandling: 'merge'
})

هذا الخيار أبسط ويتطلب عملاً أقل لضمان عدم إزالة معلمات أخرى. كما أنك لا تحتاج إلى القلق بشأن تنظيف الاشتراك المرئي عندما يتم تدمير المكون الخاص بك.

الإجابة رقم 2

تحديث: إجابة @epelc أدناه هي الطريقة المحدثة والصحيحة للقيام بذلك: https://stackoverflow.com/a/52193044/5932590.

لسوء الحظ، لا يوجد حالياً طريقة واضحة للقيام بذلك: https://github.com/angular/angular/issues/18011. ومع ذلك، كما علق jasonaden على الموضوع المرتبط،

يمكن القيام بذلك يدويًا عن طريق دمج معلمات الاستعلام القديمة والجديدة، وإزالة المفتاح الذي لا تريده.

إليك طريقة واحدة للقيام بذلك:

لنفترض أن لديك معلمات الاستعلام مخزنة في بعض الخصائص.

class MyComponent() {
  id: string;
  pos: string;
  sd: string;

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

  ngOnInit() {
    this.route.url.subscribe(next => {
      const paramMap = next.queryParamMap;
      this.id = paramMap.get('id');
      this.pos = paramMap.get('pos');
      this.sd = paramMap.get('sd');
    });
  }
}

طريقة لمسح المعامل pos ستبدو هكذا:

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

سيؤدي هذا فعليًا إلى الانتقال إلى المسار الحالي ومسح معامل الاستعلام pos الخاص بك، مع الحفاظ على باقي معلمات الاستعلام كما هي.