ionic-team / ionic-team/ionic-docs

content: Example shows uncommon IonRouterOutlet usage

Offen
#3,583 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
content package: angular
Vorherrschende Sprache
MDX
Sterne
621
Forks
3.2k
Ø Merge
1 T. 2 Std.
Gemergte PRs (30 T.)
86

Beschreibung

### 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:
```ts
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();
}
});
}
```

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.