如何在Angular路由中基于ngx-device-detector加载对应设备组件？

因为路由数组属于静态配置，无法直接注入DeviceDetectorService，所以需要绕开这一限制，以下是几种实用的落地方案：

方案1：使用路由守卫实现设备路由重定向 #

通过路由守卫注入设备检测服务，判断设备类型后自动重定向到对应设备的路由配置。

实现步骤： #

1. 预先定义不同设备的路由条目：

const routes: Routes = [
  // 桌面端专属路由
  { path: 'desktop', component: DesktopComponent },
  // 移动端/平板端专属路由
  { path: 'mobile', component: MobileComponent },
  // 入口路由，由守卫处理设备判断与重定向
  { path: '', canActivate: [DeviceRouteGuard], component: EmptyPlaceholderComponent }
];

2. 创建路由守卫DeviceRouteGuard：

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { DeviceDetectorService } from 'ngx-device-detector';

@Injectable({ providedIn: 'root' })
export class DeviceRouteGuard implements CanActivate {
  constructor(
    private deviceService: DeviceDetectorService,
    private router: Router
  ) {}

  canActivate(): boolean {
    const isMobileOrTablet = this.deviceService.isMobile() || this.deviceService.isTablet();
    
    if (isMobileOrTablet) {
      this.router.navigate(['/mobile']);
    } else {
      this.router.navigate(['/desktop']);
    }
    return false; // 阻止原路由激活，直接执行重定向
  }
}

用户访问根路径时，守卫会自动完成设备判断并跳转到对应组件的路由。

方案2：在父组件中动态加载对应设备组件 #

如果不需要拆分路由，可在一个父组件内直接根据设备类型动态渲染目标子组件。

实现步骤： #

1. 在父组件模板中预留动态组件容器：

<ng-template #componentContainer></ng-template>

2. 父组件类中注入服务并完成动态加载：

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { DeviceDetectorService } from 'ngx-device-detector';
import { DesktopComponent } from './desktop/desktop.component';
import { MobileComponent } from './mobile/mobile.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  @ViewChild('componentContainer', { read: ViewContainerRef }) container!: ViewContainerRef;

  constructor(
    private deviceService: DeviceDetectorService,
    private resolver: ComponentFactoryResolver
  ) {}

  ngOnInit(): void {
    this.loadTargetComponent();
  }

  private loadTargetComponent(): void {
    this.container.clear();
    const targetComponent = this.deviceService.isMobile() || this.deviceService.isTablet() 
      ? MobileComponent 
      : DesktopComponent;
    
    const factory = this.resolver.resolveComponentFactory(targetComponent);
    this.container.createComponent(factory);
  }
}

这种方式无需额外配置路由，直接在父组件内完成设备判断与组件渲染。

方案3：路由data属性结合组件内判断 #

如果想保留统一路由入口，可在路由配置中存储设备与组件的映射关系，再在入口组件内完成切换。

实现步骤： #

1. 路由配置中添加data字段存储组件映射：

const routes: Routes = [
  { 
    path: '', 
    component: DeviceSwitchComponent,
    data: {
      mobileComponent: MobileComponent,
      desktopComponent: DesktopComponent
    }
  }
];

2. 在DeviceSwitchComponent中完成设备判断与组件渲染：

import { Component, OnInit, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DeviceDetectorService } from 'ngx-device-detector';

@Component({
  selector: 'app-device-switch',
  template: '<ng-template #container></ng-template>'
})
export class DeviceSwitchComponent implements OnInit {
  @ViewChild('container', { read: ViewContainerRef }) container!: ViewContainerRef;

  constructor(
    private route: ActivatedRoute,
    private deviceService: DeviceDetectorService,
    private resolver: ComponentFactoryResolver
  ) {}

  ngOnInit(): void {
    const routeData = this.route.snapshot.data;
    const targetComponent = this.deviceService.isMobile() || this.deviceService.isTablet()
      ? routeData['mobileComponent']
      : routeData['desktopComponent'];
    
    const factory = this.resolver.resolveComponentFactory(targetComponent);
    this.container.createComponent(factory);
  }
}

这种方式既保留了统一的路由入口，又能灵活实现设备对应的组件切换。

内容的提问来源于stack exchange，提问作者Steven Price