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

Question

使用Angular 7 Web应用程序，使用TypeScript，引导程序，ngx-bootstrap等时，如何根据用户所使用的设备（台式机还是移动设备）在组件之间进行切换？

我看到很多网站在调整大小时显示不同的组件！ 我不确定这些是否是具有大量精美CSS的相同响应组件，但在某些情况下，似乎它们是完全不同的组件。

例如YouTube桌面版与移动版（非本地）

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();