Nativescript Back Button not redirecting to the correct page

Question

I am trying to create an Angular 2 component for Android that displays the content of a specific path. For this I created the following app-routing.module:

 @NgModule({
  imports: [
    NativeScriptRouterModule.forRoot([
      { path: '', component: HomeComponent },
      { path: 'folder-content/:path', component: FolderContentComponent },

    ])
  ],
  exports: [NativeScriptRouterModule]
})

For completeness, here is the xml for folder-content.xml

<StackLayout>
    <GridLayout row="auto, *" row="2">
        <ListView [items]="getContent(currentPath)">
            <template let-item="item">
                <GridLayout columns="auto, *"   [nsRouterLink]="['/folder-content', item.path]">
                    <GridLayout columns="auto" rows="auto" cssClass="favorite-wrap">
                        <Image id="imgFav" [src]="item.isFile() ? 'res://ic_add_to_fav_1': 'res://folder'" stretch = "none" cssClass="icon-image"></Image>
                    </GridLayout>
                    <StackLayout col="1">
                        <Label [text]="item.name" cssClass="info-bigger"></Label>
                        <Label [text]="item.path" cssClass="info-orange"></Label>
                    </StackLayout>
                </GridLayout>
            </template>
        </ListView>
    </GridLayout>
</StackLayout>

Each time I tap on a list item, I want to navigate to the same page, but with a different parameter (This works as expected).

The problem is when I try to navigate back (using the physical back button) I get redirected to the HomeComponent instead of FolderContentComponent.

I tried printing the router events to get more information using the following snippet:

 router.events.forEach((event) => {
     console.log(event);
    });

I get the following when navigating from the default path to folder-content +'/' as a parameter:

JS: NavigationStart(id: 19, url: '/folder-content/%2F')
JS: RoutesRecognized(id: 19, url: '/folder-content/%2F', urlAfterRedirects: '/folder-content/%2F', state: Route(url:'', path:'') { Route(url:'folder-content/%2F', path:'folder-content/:path') } )
JS: NavigationEnd(id: 19, url: '/folder-content/%2F', urlAfterRedirects: '/folder-content/%2F')

I get the following when navigating from folder-content +'/' to folder-content +'/sdcard':

JS: NavigationStart(id: 20, url: '/folder-content/%2Fsdcard')
JS: RoutesRecognized(id: 20, url: '/folder-content/%2Fsdcard', urlAfterRedirects: '/folder-content/%2Fsdcard', state: Route(url:'', path:'') { Route(url:'folder-content/%2Fsdcard', path:'folder-content/:path') } )
JS: NavigationEnd(id: 20, url: '/folder-content/%2Fsdcard', urlAfterRedirects: '/folder-content/%2Fsdcard')

However, when pressing the back button I would expect to navigate from folder-content +'/sdcard' to folder-content + '/' but in stead I get redirected to '' (HomeComponent)

JS: NavigationStart(id: 21, url: '/')
JS: RoutesRecognized(id: 21, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } )
JS: NavigationEnd(id: 21, url: '/', urlAfterRedirects: '/')

It's important to mention that I am using page-router-outlet and not the standard Angular router.

TNS version: 2.5.1, Angular version: 2.4.3, Android platform 6.0.1

Answer 1

Try to this for back button.

Add this code in your project app.component.ts :-

import * as application from "tns-core-modules/application";

clickCount: number = 0;

constructor() {
 if (application.android) {            
  application.android.on(application.AndroidApplication.activityBackPressedEvent, (data: any) => {
            if (this._routerExtensions.router.url == '/home') {
                data.cancel = (this.clickCount++ > 0) ? false : true;
                if (data.cancel) Toast.makeText("Press again to exit", "long").show();
                setTimeout(() => {
                    this.tries = 0;
                }, 2000);
            }
        });
  }
}

One page to another page redirection code

import { NgZone } from "@angular/core";
import { isIOS } from "tns-core-modules/platform";
import { RouterExtensions } from "nativescript-angular/router";

constructor(private zone: NgZone,
    private _routerExtensions: RouterExtensions){ }

gotoFolderContentPage() {
    setTimeout(() => {
        this.zone.run(() => {
            this._routerExtensions.navigate(["folder-content",1], {
                clearHistory: (isIOS) ? true : false,
            });
        });
    }, 500);
}