刷新所有组件路由

Question

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

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

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

目前我在加载和调整大小事件时更改它们：

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