Nativescript angular navigate to previous component

Question

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?

Nick Iliev · Accepted Answer · 2018-04-13 07:42:33Z

1

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 Apr 13, 2018 at 7:42

Nick Iliev

9,6703 gold badges38 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aaron Ullal Over a year ago

That's awesome dude!! Thank you so much, the navigation happens correctly indeed. I am experiencing another small issue, it seems that when I navigate back the component isn't rendered correctly until I tough an image, textfield etc. Here is a link that shows what happens. What do you think I could do? gfycat.com/DangerousIdenticalArabianhorse

Nick Iliev Over a year ago

Hard to say - woulkd need the code base to investigate

Collectives™ on Stack Overflow

Nativescript angular navigate to previous component

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related