Question

我想对angular 7网站做出响应。我有两种截然不同的布局，没有使用CSS Media Queries隐藏所有这些不必要的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]);

刷新所有组件布线

1 个答案: