angular - 如何根据设备（网络或移动设备）显示不同的组件？

Question

使用我的 Angular 7 Web 应用程序，使用 TypeScript、bootstrap、ngx-bootstrap 等，我如何根据用户使用的设备（台式机与移动设备）在组件之间切换？

当我调整大小时，我看到很多显示不同组件的网站！我不确定这些是否是相同的响应组件，只是带有许多花哨的 css，但在某些情况下，它们似乎是完全不同的组件。

前任。YouTube 桌面版与移动版（非原生）

标签： angulartypescriptangular-components

Answer 1

您可以安装ngx-device-detector并检测您正在使用的设备：

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

this.deviceInfo = this.deviceService.getDeviceInfo();
const isMobile = this.deviceService.isMobile();
const isTablet = this.deviceService.isTablet();
const isDesktopDevice = this.deviceService.isDesktop();