Question

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

TL：DR;在底部。

仪表板->垃圾箱->零件

我正在与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);
  }

这很好用，当我进入垃圾箱页面时，我收到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发送到零件页面

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

零件页面，从垃圾箱（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页面或part页面上启动时。如果我直接进入某个页面的某页（例如/ dashboard / bins？type = antenna），则可以正常导航至该仪表板和正确的零件页面，但是如果我导航至该仪表板并选择另一个垃圾箱，则只会得到即使URL中的查询参数已更新，初始bin中的各个部分也仍然存在。

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

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

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

如您所见，我正在发送ID 85x...，并收到先前的ID bHg...

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

在某些情况下，带有navigationExtras的ionic 4 router.navigate不会覆盖queryParams

0 个答案: