Navigate to previous component

android

#1

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?


#2

Can you explain the flow from the beginning, what all routes you visited before hitting the issue?

Is it possible for you to create a playground that demonstrates the issue?


#3

Hi Manoj!

So I start the app and go to start component.

From start i go to main/explore

And from main/explore I go to main/camera

When I press back, instead of going to main/explore I get back to the start component.

start and main are two different pages (page-router-outlet), while camera and explore are two components loaded in the main page.

Basically the structure is as follows:

app.component

<page-router-outlet></page-router-outlet>

this is where routing of start and main pages is done.

Than in main.component I have :

<ActionBar>

  <app-action-bar></app-action-bar>

</ActionBar>

  <router-outlet></router-outlet>

  <app-navigation></app-navigation>

this router outlet manages navigation between main/explore and main/camera.

Is this info sufficient or should I go about and create a playground?

Thank you so much for your precious time!!


#4

Have you customized location strategy anywhere in your application?

I assume your start module is a simple page without any router outlets right. So I don’t have anything to suspect here, so a playground will help to debug this further.


#5

Hi Manoj!
Sorry for the delay,
here is the playground

Thank you so much for looking into this :slight_smile:


#6

Thanks to @NickIliev, this is the solution:

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

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

});