Ionic 4 - How to check current page is on root or not?

Ionic Framework
1

How to check current page is root page or forwarded page in ionic 4,

On device back button press i want show alert before closing app

this.platform.backButton.subscribe(async () => {
    if (status) { // I WANT TO MAKE THIS STATUS TRUE ONLY IF APP VIEW IS ON ROOT PAGE
      const alert = await this.alertController.create({
        header: 'Confirm!',
        message: 'Are you sure? Do you want to exit app?',
        buttons: [
          {
            text: 'Cancel',
            role: 'cancel',
            handler: (blah) => {
            }
          }, {
            text: 'Exit',
            handler: () => {
              navigator['app'].exitApp();
            }
          }
        ]
      });
      await alert.present();
    }
  });
2

Can any one help me with to check current page is in root or not??

Please help me out…

3

I don’t know if there is some elegant/simple way to do this. What I would do is change if (status) to be something like if (getTheValueFromAService()). Described below.

Then, when you are displaying the root page, you set the variable to true, and otherwise, you set it to false.

Now, the question is, where does this variable onRootPage live? I’d implement this by creating a super small service component that has a get() and setOnRootPage(tOrF). Let’s call this provider OnRootPageService. You can then use injection to get a hold of this object on all pages, and you can call get() or set() on it.

E.g., suppose you’ve created the service, then in your home.page.ts (assuming that is your “root” page), you might put:

<imports here...>

export class HomePage {

  constructor(private onRootSvc: OnRootPageService) {
    this.onRootSvc.setOnRootPage(true);
  }

  // called when you display this home page.
  ionViewWillEnter() {
    this.onRootSvc.setOnRootPage(true);
  }

  ...
}

Use the same kind of injection on other pages, but set the value to false.

Then in the file where you are doing the backButton.subscribe(... code, use injection to get a variable this.onRootSvc and write if (this.onRootSvc.get()), which will be true if you are on the root page.

Hope this helps and isn’t too complicated. See https://www.joshmorony.com/when-to-use-providersservicesinjectables-in-ionic/, although it is a little old and calls services “providers”.

P.S. Create a service by doing ionic generate service OnRootPage from the command line.

4

canGoBack - Returns true if the current view can go back.

5

I have tried to implement ion-nav but i have got message like this

Cannot read property ‘canGoBack’ of null from ionNav

6

Did you create this project from scratch? If so, it is using Angular’s routing, not like it was done in the old days. You could subscribe to the ActivatedRoute to determine if the current route is equal to the default route.

7

You can use IonRouterOutlet to check whether the page is root or not
Ex-
import
@ViewChild(IonRouterOutlet,{static:true}) routerOutlet: IonRouterOutlet;
and check canGoBack method of routerOutlet