刷新所有组件工艺路线

Question

我想让一个angular 7网站具有响应性。我有两个非常不同的布局，而不是用CSS Media查询隐藏所有这些不必要的HTML，我创建了两个组件，一个对应于较大的桌面版本，另一个对应于手机和较小显示器的版本。所以我做了两个不同的路由：

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

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

目前，我在load和resize事件中更改了它们：

@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();
            }
        };
    }
}

但这种方法的效率很低，因为它会在组件更改时重新加载页面。有没有办法不用重新加载整个页面就可以重新加载它们？

Answer 1

我通过这样做让它工作了

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

然后再用下面的代码来欺骗它：

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