0

我想让一个 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();
            }
        };
    }
}

但是这种方法效率低下，因为它会在组件更改时重新加载页面。有没有办法在不重新加载整个页面的情况下重新加载它们？

4

1 回答 1

0

我已经做到了

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

后来欺骗它：

this.router.navigate([this.router.url]);
于 2019-01-02T16:56:46.343 回答