[Ionic Angular] back-buttonの処理をプログラムで再現する

<ion-back-button><ion-back-button> 、便利ですよね。

• 遷移先から遷移元にpopで戻ることができる
• defaultHref 属性を入れておけば遷移元を設定でき、直接当該Routeにアクセスした場合でもpopで戻れる
• 遷移元が存在し（history.back()できる）、かつ defaultHref と戻り先が異なる場合は、遷移元を優先する

たった1つのコンポーネントでここまで条件分岐してかつバックボタンを表示してくれるので、Ionic開発では重宝します。しかしながら、唯一の問題は「プログラムでpopしたい時」です。たとえば、削除作業が完了したら、ユーザがバックボタンを押す必要なく、自動的にpopするようにしたい場合ですよね。

1箇所からでしかプッシュ遷移しない場合は、プログラムは簡単です。

  constructor(
    private navCtrl: NavController,
  ) {}

  pop() {
    this.navCtrl.navigateBack('【戻り先のURL】');

    // 以下でも同じ挙動をします
    // this.navController.setDirection('back');
    // this.router.navigateByUrl('【戻り先のURL】');
  }

で完了します。しかし、複数ページから呼び出しがあって、戻り先が一箇所に固定できない場合があります。そういった時のために、 ion-back-button の処理をプログラミングしておきましょう。以下のように書くことができます。

  public backButtonMethod(routerOutlet: IonRouterOutlet, navCtrl: NavController, defaultHref: string): void {
    if (routerOutlet && routerOutlet.canGoBack()) {
      navCtrl.setDirection('back');
      routerOutlet.pop();
    } else if (defaultHref != null) {
      navCtrl.navigateBack(defaultHref);
    }
  }

まず、 IonRouterOutlet.canGoBack() によって pop() できるかの判定を行うことができます。なので、 pop() できる場合は、 pop() で戻るようにしましょう。そして、できない場合は、 defaultHref を戻り先として指定します。

これで、　ion-back-button の処理をプログラムでできるようになりました。 簡単ですね。

それではまた。