Skip to content

content: Example shows uncommon IonRouterOutlet usage #3583

Open
@Bungeefan

Description

@Bungeefan

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!):
ionic-team/ionic-framework#21630 (comment)

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();
    }
  });
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    contentIssues related to the contents of the documentation websitepackage: angularIssues related to the Ionic Angular documentation

    Type

    No type

    Projects

    Status

    Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions