content: Example shows uncommon IonRouterOutlet usage

オープン 初心者向け
#3,583 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

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

評価

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

調査の方向性

リンクされているハードウェアの戻るボタンのドキュメントを開き、Angular (Standalone) タブで IonRouterOutlet がどのように注入されているかを重点的に確認します。デフォルトの Android スタイルの終了動作に対応する、トップレベルコンポーネントを使った動作するアプローチを示すように例を更新し、表示されるコードがそのユースケースと一致していることを確認します。

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

説明

content package: angular
URL

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

Issue Description

On the linked page (I am referencing the Angular (Standalone) tab), the IonRouterOutlet is injected via the constructor.
However, this only works if it used in a subcomponent of the app and not in AppComponent and, I would argue that this is a rather uncommon use-case, as the usual developer probably only wants to add it to the top-most component.

In my case, I had to search for quite some time to find a really neat solution in the following issue comment, and according to the reactions I am not alone (note that the issue is also locked since nearly 4 years!):
https://github.com/ionic-team/ionic-framework/issues/21630#issuecomment-683007162

IMO, the docs example should show a working way of implementing the default behavior (like in native Android apps) in a straightforward way like:

import { ViewChild } from '@angular/core';
import { IonRouterOutlet, Platform } from '@ionic/angular/standalone';
import { App } from "@capacitor/app";

// ...

@ViewChild(IonRouterOutlet, {static: true}) routerOutlet?: IonRouterOutlet

constructor(private platform: Platform) {
  this.platform.backButton.subscribeWithPriority(-1, () => {
    if (this.routerOutlet && !this.routerOutlet.canGoBack()) {
      App.exitApp();
    }
  });
}
主要言語
MDX
スター
621
フォーク
3.2k
平均マージ
1日 2時間
マージ済み PR（30日）
86

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

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

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

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

似ている issue

Documentation の issue をもっと見る

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

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