Ionic 5、Angular 9 从 URL 中删除查询参数答案

【问题标题】：Ionic 5, Angular 9 Remove query params from URLIonic 5、Angular 9 从 URL 中删除查询参数
【发布时间】：2020-11-12 17:42:49
【问题描述】：

我有 PWA 和一个带有 Ionic 5 的移动应用程序。我单击电子邮件中的 URL，该 URL 使用通用链接重定向我。

https://example.com/?param1=value1&param2=value2

我的目标是在页面加载时使用参数创建一个新对象，然后删除参数并导航到下一页。我使用的位置看起来像这样。

this.route.queryParams.subscribe(
  params => {
    if (params.create) {
      const navParams = params;

      // Do something with params         

      this.location.replaceState("/");
      this.navCtrl.navigateForward("/another-page/:id)
    }
  }
)

这一切都很好，参数已从 URL 中删除，但问题是当我使用 ion-back-button 导航返回时，它会将我发送回主页，但参数会再次加载。我猜想this.location.replaceState("/") 并没有完全清除 queryParams。

在导航到下一页之前，我尝试了this.navCtrl.setRoot("")，但没有奏效。

你能建议吗？谢谢。

【问题讨论】：

标签： angular ionic-framework ionic5

【解决方案1】：

当你做this.navCtrl.navigateForward时尝试导航到这样的页面：

https://example.com/nextpage/?params

通过在它之间添加nextpage 可以达到您想要的效果，但它会将额外的下一页添加到您的网址中

这样，当您向后导航时，前一个参数将消失。

【讨论】：

这并不能解决问题。我需要重置导航堆栈，哪个位置不这样做。
您是否尝试在 this.activatedRoute.queryParams.subscribe() 订阅您的 https://example.com/ 页面上的参数更改，然后在更改时导航到 https://example.com/

【解决方案2】：

不确定你是否设法解决了这个问题，但你可以试试这个......

import { ActivatedRoute } from '@angular/router';

...
...

const paramValue = this.activatedRoute.snapshot.queryParamMap('paramKey');

【讨论】：