根据设备加载路由组件

Question

我希望能够根据正在查看应用程序的设备来显示不同的组件。我目前正在使用下面的内容来更改组件并且它可以工作。问题是它基于屏幕宽度而不是基于用户正在查看的设备。

export const isDesktop = (): boolean => {
    return window.innerWidth > 768
}

export const routes: Routes = [
    {
        path: "",
        component: AppLayoutComponent,
        children: [
            { path: "route1", loadComponent: () => isDesktop() ? import("./pages/desktop/component1.component") : import("./pages/mobile/component1.component") },
            { path: "route2", loadComponent: () => isDesktop() ? import("./pages/desktop/component2.component") : import("./pages/mobile/component2.component") }
    ]
  }
];

我发现其他用户使用 ngx-device- detector 包来确定设备类型，如果可能的话，我希望能够使用它，但我无法弄清楚如何在路由数组中使用此服务的实例。

我希望能够做的是类似下面的事情，但显然这是行不通的。

import { DeviceDetectorService } from 'ngx-device-detector';

export const isDesktop = (): boolean => {
    const service = inject(DeviceDetectorService);
    return !service.isMobile();
}

您能否建议我尝试的方式是否完全错误，并提供建议的替代方法，或者您知道我如何在路由数组中访问该服务吗？

Answer 1

您可以编写一个函数，使用浏览器的

navigator

对象的

userAgent

属性检查设备。

const isMobile = {
  Android: function () {
    return navigator.userAgent.match(/Android/i);
  },
  BlackBerry: function () {
    return navigator.userAgent.match(/BlackBerry/i);
  },
  iOS: function () {
    return navigator.userAgent.match(/iPhone|iPad|iPod/i);
  },
  Opera: function () {
    return navigator.userAgent.match(/Opera Mini/i);
  },
  Windows: function () {
    return navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/WPDesktop/i);
  },
  any: function () {
    return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
  }
};

export const routes: Routes = [
    {
        path: "",
        component: AppLayoutComponent,
        children: [
            { path: "route1", loadComponent: () => !isMobile.any() ? import("./pages/desktop/component1.component") : import("./pages/mobile/component1.component") },
            { path: "route2", loadComponent: () => !isMobile.any() ? import("./pages/desktop/component2.component") : import("./pages/mobile/component2.component") }
    ]
  }
];

如何在 Angular 中分离桌面和移动页面并延迟加载每个页面？