Angular：根据媒体断点切换服务接口地址

嘿，我来帮你搞定根据设备尺寸切换API地址的问题！首先你当前的代码里有个明显的小坑——重复声明了同一个私有变量_tUrl，这在TypeScript里是会直接触发语法错误的，咱们先把这个问题解决掉，再实现动态切换接口地址的逻辑。

下面提供两种实用的实现方式，你可以根据自己的项目环境选择：

方式一：直接监听窗口尺寸（适合普通浏览器环境） #

如果你的应用运行在浏览器中，可以通过获取当前窗口宽度或者监听窗口 resize 事件来判断设备类型，动态设置API地址：

@Injectable({
  providedIn: 'root'
})
export class HomeService {
  private _tUrl: string;

  constructor() {
    // 初始化时就根据当前窗口尺寸设置地址
    this.updateApiUrl();
    // 可选：监听窗口大小变化，实时更新地址
    window.addEventListener('resize', () => {
      this.updateApiUrl();
    });
  }

  private updateApiUrl(): void {
    // 这里可以自定义分界尺寸，比如768px是移动端和桌面端的常用阈值
    const isMobileDevice = window.innerWidth < 768;
    this._tUrl = isMobileDevice ? 'this should be on mobile' : 'this should be on desktop';
  }

  // 对外提供获取API地址的方法
  get apiUrl(): string {
    return this._tUrl;
  }
}

方式二：用Angular官方的BreakpointObserver（更优雅的Angular方案） #

如果你是基于Angular框架开发，官方推荐使用BreakpointObserver来响应式检测设备断点，这更贴合Angular的生态：

首先需要在你的模块中导入LayoutModule：

import { LayoutModule } from '@angular/cdk/layout';

@NgModule({
  imports: [
    // ...其他依赖模块
    LayoutModule
  ]
})
export class AppModule { }

然后在HomeService中使用：

import { Injectable } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class HomeService {
  private _apiUrl$: Observable<string>;

  constructor(private breakpointObserver: BreakpointObserver) {
    // 监听设备是否为手持设备（移动端）
    this._apiUrl$ = this.breakpointObserver.observe([Breakpoints.Handset])
      .pipe(
        map(detectionResult => detectionResult.matches ? 'this should be on mobile' : 'this should be on desktop')
      );
  }

  // 返回Observable，外部组件可以订阅获取地址变化
  get apiUrl$(): Observable<string> {
    return this._apiUrl$;
  }
}

额外注意点 #

• 绝对不要在同一个类里重复声明同名变量，这是TypeScript的基础语法规则；
• 如果你的项目涉及服务端渲染（SSR），不能直接使用window对象，需要通过PLATFORM_ID先判断当前运行平台再做处理；
• 你可以根据业务需求自定义设备尺寸的分界值，比如把移动端阈值调整为992px之类的。

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