Angular 6（PWA）：如何为同一URL按设备显示不同组件？

当然可以让path:'dashboard'根据设备类型加载不同的组件！不过你当前代码里直接在路由数组里写if判断是行不通的——Angular的路由配置是静态的，没法在数组定义里直接插入条件逻辑。下面给你几种靠谱的实现方案，以及对应的最佳实践：

方案1：用中间包装组件做动态渲染 #

这是最直观的方式，创建一个DashboardWrapperComponent作为路由的目标组件，在这个组件内部完成设备判断，然后动态渲染对应的桌面/移动端组件。

步骤： #

1. 创建包装组件：

// dashboard-wrapper.component.ts
import { Component, OnInit } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

@Component({
  selector: 'app-dashboard-wrapper',
  template: `
    <app-ddashboard *ngIf="isDesktop"></app-ddashboard>
    <app-mdashboard *ngIf="!isDesktop"></app-mdashboard>
  `
})
export class DashboardWrapperComponent implements OnInit {
  isDesktop = true;

  constructor(private breakpointObserver: BreakpointObserver) {}

  ngOnInit() {
    // 监听屏幕断点，这里用Angular CDK的预设断点，你也可以自定义宽度
    this.breakpointObserver.observe([Breakpoints.Web])
      .subscribe(result => {
        this.isDesktop = result.matches;
      });
  }
}

2. 修改路由配置：

// app-router.module.ts
import { DashboardWrapperComponent } from './dashboard-wrapper/dashboard-wrapper.component';

const routes: Routes = [
  { path:'', component:DheaderComponent},
  { path:'dashboard', component: DashboardWrapperComponent },
  { path:'mdashboard',component:MdashboardComponent},
];

方案2：用路由的loadComponent动态加载组件 #

如果你不想用中间组件，可以直接在路由配置里用loadComponent函数，根据设备条件返回对应的组件。这种方式更轻量化，但要注意处理SSR场景。

路由配置修改： #

// app-router.module.ts
import { isPlatformBrowser } from '@angular/common';
import { Inject, PLATFORM_ID } from '@angular/core';

// 先定义一个判断设备的函数
const getDashboardComponent = () => {
  // 注意：如果是SSR环境，这里需要用user-agent判断，或者默认返回桌面组件
  if (typeof window !== 'undefined' && window.innerWidth >= 768) {
    return import('./ddashboard/ddashboard.component').then(m => m.DdashboardComponent);
  } else {
    return import('./mdashboard/mdashboard.component').then(m => m.MdashboardComponent);
  }
};

const routes: Routes = [
  { path:'', component:DheaderComponent},
  { path:'dashboard', loadComponent: getDashboardComponent },
  { path:'mdashboard',component:MdashboardComponent},
];

// 如果是SSR，需要在模块里注入PLATFORM_ID来判断环境
@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule { 
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
}

最佳实践 #

• 优先使用Angular CDK的BreakpointObserver：自己监听window.resize容易出现防抖、多设备适配不全的问题，CDK的断点工具已经封装了这些细节，支持预设断点（如Breakpoints.Web、Breakpoints.Handset）和自定义断点。
• 处理SSR场景：如果你的应用用了Angular Universal，服务器端没有window对象，这时候可以通过请求的user-agent头判断设备类型，或者默认返回桌面组件，避免报错。
• 提供手动切换选项：自动判断可能不符合用户需求，比如用户想在平板上看桌面版，可以加一个切换按钮，把用户的选择存在localStorage里，判断时优先读取用户的手动设置。
• 保持路由配置简洁：不要把复杂的设备判断逻辑写在路由数组里，抽离到服务或组件中，让路由配置只负责路由映射。
• 组件复用逻辑：如果桌面和移动端组件有共用的业务逻辑，把这些逻辑抽离到服务里，避免重复代码。

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