Refresh view on navigation back



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">

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;

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

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


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


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