0

I wanted to make a angular 7 website responsive. I have two very different layouts and instead of hiding all of this unnecessary HTML with CSS Media Queries I created two components corresponding to a larger desktop version and a version for mobile phones and smaller displays. So I made two different routings:

const dekstop: Routes = [
    {
        path: '',
        component: HomePageComponent
    },
    ...
];

const mobile: Routes = [
    {
        path: '',
        component: MobileHomePageComponent
    },
   ...
];

Currently I change them on load and a resize event:

@NgModule({
    imports: [RouterModule.forRoot(dekstop)],
    exports: [RouterModule]
})

export class AppRoutingModule {

    mobileConfigured = false;

    public constructor(private router: Router,
                       private device: DeviceService) {

        if (device.isMobile()) {
            router.resetConfig(mobile);
            this.mobileConfigured = true;
        }

        window.onresize = () => {

            if (this.mobileConfigured && !this.device.isMobile()) {
                window.location.reload();
                return;
            }

            if (this.device.isMobile() && !this.mobileConfigured) {
                window.location.reload();
            }
        };
    }
}

But this method is inefficient because it reloads the page when the components change. Is there a way I can reload them without reloading the whole page?

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459

1 Answers1

0

I've got it working by doing

@NgModule({
    imports: [RouterModule.forRoot(desktop, {onSameUrlNavigation: 'reload'})],
    exports: [RouterModule]
})

and later tricking it with:

this.router.navigate([this.router.url]);