避免使用选项卡插入历史状态

Question

我正在用 ionic/angular 开发一个 pwa，我在使用来自 Android 的 pwa 的选项卡时遇到问题。基本上有 3 个选项卡： 主页 |购物 |收藏夹

然后每个选项卡都包含子路径。问题是，例如，如果我在主页/关于我点击购物，然后我再次点击主页，然后多次点击购物等。这会导致在 window.history 中输入新状态，如果我使用 Android 硬件后退按钮，它会让我在 home/about 和 Shopping 之间导航几次。相反，我想要以下情况：如果我在购物，我会回到家/大约，然后回家，然后应用程序关闭。这可行吗？ 我尝试同时使用路由器对象的 skipLocationChange 和 replaceUrl，例如：

export class TabsPage {
  constructor(private router: Router) {}
  goToShopping(){
    this.router.navigate(["/tabs/shopping"], {replaceUrl: true})
  }
}

标签模板：

<ion-tabs>
  <ion-tab-bar slot="bottom" (click)="goToHome()">
    <ion-tab-button tab="home">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="shopping" (click)="goToShopping()">
      <ion-icon name="card"></ion-icon>
      <ion-label>Shopping</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="favourites" (click)="goToFavourites()">
      <ion-icon name="star"></ion-icon>
      <ion-label>Favourites</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

但是，有了这个，如果我在主页/关于然后单击购物选项卡并按硬件后退按钮它会转到主页，因为它正确地将当前状态的关于替换为购物

Answer 1

正如您已经发现的那样，当按下硬件后退按钮并直接在 webview 历史记录上实现所需行为时，Ionic 默认使用嵌入式 WebView 历史记录，这需要对路由机制进行大量更改。

要“简单”处理后退按钮，您可以在app.component.ts 的Router 实例中查看popstate 事件。但请注意，这将被称为任何导航，因为页面在前进时也会调用此 popstate，因此请小心处理。

应用程序组件.ts

constructor(private router: Router) {
  //firstly, we'll need to trick the browser history on every view created
  this._app.viewDidEnter.subscribe((app) => {
    history.pushState (null, null, "");
  });  

  this.router.events.subscribe((event: any): void => {
    if (event instanceof NavigationStart) {
      if (event.navigationTrigger === 'popstate') {
        // Navigation was triggered
        
      }
    }
  }
}

此外，如果您在使用电容器的本机平台上运行，则可以收听 Platform 事件并决定是否要覆盖默认行为。官方文档中的例子如下：

import { Platform } from '@ionic/angular';

/// ...

constructor(private platform: Platform) {
  this.platform.backButton.subscribeWithPriority(10, (nextHandler) => {
    // do some logic validation here
    // ...
    // if you do not need a custom behavior and want the framework 
    // to handle the back button normally, just call the nextHandler() parameter

    nextHandler();
  });
}

你可以在Hardware Back Button的官方文档中找到更多示例和详细解释