Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

content: Angular "Exiting the App" example exits from pages nested under ion-tabs

オープン 初心者向け
  • 何か問題がありますか？
#4,804 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
82/100
issue の種類
ドキュメント
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
angular, typescript
領域
documentation

調査の方向性

docs/developing/hardware-back-button.mdx と versioned_docs/version-v8/developing/hardware-back-button.mdx を読み、Angular のタブの例を、報告されたネストされたページでの動作と比較してください。両方の例と、@ViewChild を使った IonRouterOutlet の参照に関する説明文を更新し、提案された NavController.pop() のフローを使うようにしてください。両方のバージョンで、ルートで終了する前にタブスタック内を戻る操作を説明し、例示できたら完了です。

索引モデルが issue の本文から書いたものです。

説明

content
URL

https://ionicframework.com/docs/developing/hardware-back-button#exiting-the-app

Issue Description

The Angular examples under "Exiting the App" query the root IonRouterOutlet with @ViewChild and exit when canGoBack() is false. In an app that uses ion-tabs, pages inside a tab are stacked in the tab's own outlet, so the root outlet's stack only ever holds the tabs page and canGoBack() is always false. On a page such as /tabs/home/detail, pressing the hardware back button exits the app instead of going back to /tabs/home.

Measured on @ionic/angular 9.0.9:

Layout, page Root outlet canGoBack() NavController.pop() resolves Example
Flat, one page deep true true stays
Flat, root false false exits
Tabs, /tabs/home/detail false true exits (wrong)
Tabs, /tabs/home false false exits

NavController.pop() walks from the active outlet up through its parents, so its result is the reliable signal. Suggested replacement for both Angular tabs (import from @ionic/angular/lazy for the modules example):

import { Component, inject } from '@angular/core';
import { NavController, Platform } from '@ionic/angular';
import { App } from '@capacitor/app';

@Component({ ... })
export class AppComponent {
  private platform = inject(Platform);
  private navCtrl = inject(NavController);

  constructor() {
    this.platform.backButton.subscribeWithPriority(1, async () => {
      const popped = await this.navCtrl.pop();
      if (!popped) {
        App.exitApp();
      }
    });
  }
}

Priority 1 runs before the built-in navigation handler (priority 0) and after menus and overlays (99 and 100), so it takes over the back navigation itself. The sentence about querying IonRouterOutlet with @ViewChild would need to change with it.

Both docs/developing/hardware-back-button.mdx and versioned_docs/version-v8/developing/hardware-back-button.mdx carry the same example.

Reported in ionic-team/ionic-framework#31598.

主要言語
MDX
スター
620
フォーク
3.2k
平均マージ
15時間 17分
マージ済み PR（30日）
52

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

ionic-team/ionic-docs のほかの issue

ionic-team/ionic-docs の issue をすべて見る

似ている issue

Documentation の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。