Nativescript Back button is not redirected to the correct page

Question

I am trying to create an Angular 2 component for Android that displays the contents of a specific path . To do 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 click on a list item, I want to go to the same page, but with a different parameter (this works as expected).

The problem is that when I try to go back (using the physical back button), I am redirected to HomeComponent instead of FolderContentComponent.

I tried to print router events to get additional information using the following snippet:

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

- + '/' :

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')

- + '/' - + '/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')

"" f old-content + '/sdcard' - + '/', '' (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: '/')

, page-router-outlet, Angular.

TNS: 2.5.1, Angular : 2.4.3, Android- 6.0.1

Answer 1

.

app.component.ts: -

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

tries: number = 0;

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

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