1

我有一个库存应用程序（设备和浏览器），用户可以在其中保留爱好零件的库存。我有一个显示零件类别（零件箱）的仪表板。如果单击该类别，您会看到该类别中的零件，然后如果您单击某个零件，您将转到零件页面。

TL：博士；在底部。

仪表板 -> 箱 -> 零件

我正在使用Router并navigationExtras改变它queryParams，我遇到了一些奇怪的问题。我将 queryParams 附加到 URL，以便用户可以在浏览器上添加书签或复制/粘贴 URL。

在仪表板页面上，当我点击一个垃圾箱时，我会得到垃圾箱的“类别”并将其作为一个queryParam垃圾箱页面发送：

  goToBin(type) {
    const navigationExtras = {
      queryParams: {
        type: (type) ? type : 'all',
      }
    };
    console.log('Go To Bin:', type, navigationExtras);
    this.router.navigate(['dashboard/bins'], navigationExtras);
  }

这很好用，当我进入 bins 页面时，我会收到 queryParams 并快速调用我的服务以获取仅与该类别相关的数组中的部分：

  ionViewWillEnter() {
    this.route.queryParams.subscribe(params => {
      console.log('Received on Bin Page:', params);
      this.type = params['type'];
    });
    this.database.initDatabase(); // Only fires when loading this page fresh
    this.getBinParts();
  }

这工作正常。然后在同一页面上，我将另一个带有部件 ID 的 queryParam 发送到部件页面，并且基本上对部件数组执行相同的操作：

Bins 页面 - 将 queryParams 发送到 Parts 页面

  goToPart(part) {
    const navigationExtras = {
      queryParams: {
        pid: part.id,
        fromBin: true,
      }
    };
    console.log('Go To Part', part, navigationExtras)
    this.router.navigate(['dashboard/part'], navigationExtras);
  }

零件页面，从 bin (url) 接收参数

  ionViewWillEnter() {
    this.route.queryParams.subscribe(params => {
      console.log('Received on Part Page:', params);
      this.pid = params['pid'];
      this.fromBin = params['fromBin'];
    });
    this.database.initDatabase(); // Again, only fires if fresh
    this.getPart();
  }

然后，从部件返回到 bins 页面：

  goBack() {
    const navigationExtras = {
      queryParams: {
        type: this.part.data.type,
      }
    };
    console.log('Go Back To Bins:', this.fromBin, this.part.data.type, navigationExtras);
    if (this.fromBin) {
      this.router.navigate(['/dashboard/bins'], navigationExtras);
    } else {
      this.router.navigate(['/dashboard']);
    }
  }

并从垃圾箱返回仪表板（注意我在这里清除了 queryParams）

  goBack() {
    const navigationExtras = {}
    console.log('Go Back To Dashboard:', navigationExtras);
    this.router.navigate(['/dashboard'], navigationExtras);
  }

如果我只从仪表板页面开始，一切都会正常工作。我加载到适当的垃圾箱和零件就好了。

TL;DR：问题是当我直接在 bin 页面或部件页面上开始时。如果我直接转到一个 bin 页面（例如 /dashboard/bins?type=antenna），我可以正常导航到仪表板和正确的部件页面，但如果我导航到仪表板并选择另一个 bin，我只会得到即使 URL 中的查询参数已更新，初始 bin 中的部分也是如此。

如果我也直接进入零件页面也会发生这种情况，但另外，如果我返回具有不同 ID 的零件页面，我将看不到其他零件。

我可以看到它没有接收到我通过控制台日志发送的新参数。按顺序，我会看到：

Go To Part {id: "85Xry68VpFN5BMfh9hGu", data: {…}} {queryParams: {…}}
Received on Part Page: {pid: "bHg19fRKW2YNXgzS2Umk", fromBin: "true"}

如您所见，我正在发送 ID85x...并接收以前的 IDbHg...

此 queryParam 是否被缓存？如果是这样，我该如何销毁它？另外，为什么只有当我直接进入这些子页面时才会发生这种情况？

4

0 回答 0