桌面和移动角的不同视图

Question

在我正在开发的应用程序中，它完全需要桌面和移动设备的两个不同的视图。不可能使用CSS作为内容完全不同。

我做了什么？

我已经检查了使用代码const isMobile = window.innerWidth < 768;

在 Routing file 中是否是台式机/移动设备

和路径组件： component: isMobile ? MobileComponent : DesktopComponent

这在开发环境中正常工作。但是，当生产构建时，这会失败ng serve --prod（显然是Angular 5）

问题：

根本没有错误，根据isMobile是正确的/错误，它应该加载MobileComponent/DesktopComponent。但是，即使Ismobile为True/false

，它也不会加载

始终将MobileComponent加载到两个台式机中＆amp;移动的。当isMobile值正确计算时，true的CC_7和false的CC_9

我认为原因是在发送给客户之前已经汇编了路线。

锻炼方法尝试但无法正常工作：

在计算isMobile并给出该变量（组件）的同时，使用了一个if..else条件

任何方法：

有什么办法可以使用相同的功能？

预先感谢

Answer 1

正如我在问题评论部分中所说的那样，路线警卫将是一个很好的解决方案。

MobileGuard看起来像这样：

export class MobileGuard implements CanActivate {
    constructor(private _router: Router, private _mobileService: MobileService) {}
    canActivate(): boolean {
        const isMobile = this._mobileService.isMobile();
        if(!isMobile) {
            this._router.navigate(['/desktop']);
        }
        return isMobile;
    }
}

DesktopGuard。

相同

试图访问任何路线的用户将被重定向到正确的路线。

这是一个建议的解决方案的运行示例。

这是Stackblitz可编辑版本。

Answer 2

不要使用Canactivate或Route Guards，因为它们需要用于身份验证等。

新方法：

{
    path: 'your-path',
    loadChildren: () => {
      if(window.innerWidth > 768 ) {
        return import('./your-desktop.module').then(m => m.YourDesktopModule)
      } else {
        return import('./your-mobile.module').then(m => m.YourMobileModule)
      }
    }
}

Answer 3

我同意@carbondry的观点，即在routingModule中使用逻辑是最好的方法。但是，我认为使用窗口尺寸是一种检测设备类型的糟糕方法。当然，这取决于用例 - 如果您只需要显示不同的小屏幕UI，则window.innerWidth会做到。如果您想要手机的单独功能，那可能还不够。

有多种检查设备类型的方法，例如，您可以使用navigator.orientation === undefined检查设备是否为桌面（因为台式机不支持navigator.orientation。

最后，您始终可以使用UserAgent检测。为此，请参阅此线程https://stackoverflow.com/a/13819253/87775880

所以最后，您的代码可能看起来像

const isDesktop(): boolean => {
   return navigator.orientation === undefined;
}
{
    path: 'path',
    loadChildren: () => {
      if(isDesktop())
        return import('./desktop.module').then((m) => m.DesktopModule);
      return import('./mobile.module').then((m) => m.MobileModule);
    }
}

编辑但是请记住，当第一次加载路径时，loadChildren只能运行一次。因此，您可能需要考虑简单地检查屏幕尺寸。假设768px在电话上可用于肖像，但是如果我以景观模式打开网站怎么办？在某些情况下，即使是景观模式也需要移动UI。但是，如果您只检查客户端宽度，则会获得桌面版本。

Answer 4

直接在这样的路线上进行更改 -

const routes: Routes = [{
  path: '',
  component:  window.screen.width > 767 ? WelcomeDesktopComponent : WelcomeMobileComponent
}];