Angular传递可注入服务函数为回调参数时HttpClient未定义问题求助

问题描述 #

我需要实现的逻辑是先获取数据，再获取同步详情以决定何时再次获取数据（逻辑细节已省略）。但当尝试将可注入服务的函数作为回调参数传递时，执行出现以下错误：

ERROR Error: Cannot read properties of undefined (reading 'http')

我推测是调用回调函数时HttpClient尚未完成注入。想确认：将可注入服务函数作为回调参数传递是否属于错误用法？有没有可行的解决方法？

原代码示例 #

DataComponent

export class DataComponent implements OnInit {
  constructor(
    private dataService: DataService,
    private syncService: SyncService
  ) {}

  ngOnInit(): void {
    this.getData().subscribe();
  }

  getData() {
    return this.dataService.getData().pipe(
      tap((res) => console.log('get first data', res)),
      switchMap(() =>
        this.syncService.getSync(this.dataService.getSyncDetails, this.getData)
      )
    );
  }
}

SyncService

@Injectable({
  providedIn: 'root',
})
export class SyncService {
  constructor() {}

  getSync(syncService: Function, callbackService: Function): Observable<any> {
    console.log('getSync');
    return syncService().pipe(
      tap((res) => console.log('get sync data', res)),
      switchMap(() => callbackService())
    );
  }
}

DataService

@Injectable({
  providedIn: 'root',
})
export class DataService {
  constructor(private http: HttpClient) {}

  getData(): Observable<any> {
    console.log('getData');
    return this.http.get('https://reqres.in/api/users');
  }

  getSyncData(): Observable<any> {
    console.log('getSyncData');
    return this.http.get('https://reqres.in/api/unknown/2');
  }
}

原因分析 #

这并非HttpClient注入时机的问题，核心原因是函数的上下文（this指向）丢失：
当你直接传递this.dataService.getSyncData或this.getData作为参数时，这些函数会脱离原实例的上下文。在严格模式下，函数执行时的this会变成undefined，因此访问this.http会抛出“无法读取undefined的http属性”的错误。

解决方法 #

1. 绑定函数上下文 #

使用bind方法将函数与原实例绑定，确保执行时this指向正确：

getData() {
  return this.dataService.getData().pipe(
    tap((res) => console.log('get first data', res)),
    switchMap(() =>
      this.syncService.getSync(
        this.dataService.getSyncData.bind(this.dataService),
        this.getData.bind(this)
      )
    )
  );
}

2. 用箭头函数包裹 #

箭头函数会继承当前上下文，通过箭头函数封装原函数调用，避免this丢失：

getData() {
  return this.dataService.getData().pipe(
    tap((res) => console.log('get first data', res)),
    switchMap(() =>
      this.syncService.getSync(
        () => this.dataService.getSyncData(),
        () => this.getData()
      )
    )
  );
}

3. 优化SyncService参数设计 #

修改SyncService的参数类型，明确接收返回Observable的函数，而非原始方法引用，从根源避免上下文问题：

@Injectable({
  providedIn: 'root',
})
export class SyncService {
  constructor() {}

  getSync(
    syncFn: () => Observable<any>,
    callbackFn: () => Observable<any>
  ): Observable<any> {
    console.log('getSync');
    return syncFn().pipe(
      tap((res) => console.log('get sync data', res)),
      switchMap(() => callbackFn())
    );
  }
}

调用时使用箭头函数传递（同方法2）即可。

总结 #

将可注入服务的函数作为回调传递本身不是错误用法，但必须确保函数执行时的this指向正确的实例。上述三种方法都能解决问题，其中箭头函数包裹的方式代码更简洁直观，是推荐的做法。

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