Nativescript angular navigate to previous component

Issue

I have a ns-angular app that is structured as follows :

in the app.component I have a master page-router-outlet with 2 pages

  • Login
  • Main

Routing is configured in the following way :

const routes: Routes = [
    { path: '', redirectTo: 'start', pathMatch: 'full' },
    { path: 'start', loadChildren: './views/login/start.module#StartModule' },
    { path: 'main', loadChildren: './views/main/main.module#MainModule' }
];

@NgModule({
    imports: [NativeScriptRouterModule.forRoot(routes)],
    exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

In the main component I have static action bar and a child router-outlet that navigates between these components.
Again routing is defined as :

const mainRoutes: Routes = [
    {
        path: '', component: MainComponent, children: [
            { path: '', redirectTo: 'main/explore', pathMatch: 'full' },
            { path: 'camera', loadChildren: './camera/camera.module#CameraModule' },
            { path: 'explore', loadChildren: './explore/explore.module#ExploreModule' }
        ]
    }
];

export const MainRouting: ModuleWithProviders = RouterModule.forChild(mainRoutes);

What currently happens is that if I am in the – let’s say- explore component ( /main/explore ), I navigate to the the camera component ( /main/camera ) and I press back on my android device, instead of going back to the explore component I go to the start module.
I read the documentation on angular navigation, but even with the following code

android.on(AndroidApplication.activityBackPressedEvent, (data: AndroidActivityBackPressedEventData) => {
    this.routerExtensions.back();
});

I am unable to return to the previous component.
How would I achieve that?

Solution

Try to overwrite the default Android behavior for the back pressed event as shown in this StackOverflow answer

Notice the data.cancel is set to true

application.android.on(AndroidApplication.activityBackPressedEvent, (data: AndroidActivityBackPressedEventData) => {

    data.cancel = true; // prevents default back button behavior

});

Answered By – Nick Iliev

Answer Checked By – Cary Denson (AngularFixing Admin)

Leave a Reply

Your email address will not be published.