Refresh view on navigation back

android

#1

I have setup a component that implements a router-outlet that allows for dynamic replacing of content between the action bar and a docked menu. This is the layout:

<ActionBar class="action-bar">
  <app-action-bar></app-action-bar>
</ActionBar>
<StackLayout>
 <router-outlet></router-outlet>
 <app-navigation></app-navigation>
</StackLayout>

Routes are defined as follows:

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

I have intercepted the activityBackPressedEvent to go back to the previous component. So if from explore I navigate to camera and press back, I want to go to explore.
This is the code I implemented:

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

The problem is that when I do this, the previous component layout is completely blank and css is not applied. This is a GIF that shows the behavior.

I’ve tried to solve the problem by adding the following code:

  1. In the constructor of the component I call ngOnInit()
  2. In the ngOnInit I
    wrappped all calls in ngZone.run()

This seems to work but it looks very ugly.…any ideas on how to solve this?


#2

What are the components you are using, are you using ScrollView with PullToRefresh plugin?


#3

It happens on any component with any view, stack layouts, listview, gridlayout etc.