Angular 2中订阅时间Observable时出现TS2322类型错误求助

嘿，这个错误其实很好定位——你在header.component里犯了一个典型的类型混淆错误：

错误原因 #

this.clockService.getClock().subscribe(...)调用后返回的是一个Subscription对象（用来管理订阅的生命周期），但你却把它直接赋值给了声明为Date类型的this.mydate变量。TypeScript的类型检查机制立刻就发现了这个不匹配，所以抛出了TS2322错误。

第一步：修正组件代码 #

把订阅的返回值和数据变量分开，专门用一个变量保存Subscription，在订阅回调里才更新日期数据：

// header.component.ts
...
private mydate: Date;
// 新增一个变量保存订阅实例
private clockSubscription!: Subscription;
...

constructor(private clockService: ClockService, private alertService: AlertsService) { }

ngOnInit() {
  // 把订阅结果存在Subscription变量里，而不是Date变量
  this.clockSubscription = this.clockService.getClock().subscribe(res => {
    // 只有在回调里才把返回的Date赋值给mydate
    this.mydate = res;
  });
}

// 务必在组件销毁时取消订阅，避免内存泄漏
ngOnDestroy() {
  if (this.clockSubscription) {
    this.clockSubscription.unsubscribe();
  }
}

第二步：优化ClockService的实现 #

你的服务代码用手动创建Observable的方式没问题，但用RxJS内置的interval操作符会更符合RxJS的最佳实践，代码也更简洁可靠：

// clock.service.ts
import { Injectable } from '@angular/core';
import { Observable, interval } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class ClockService {
  constructor() {}

  getClock(): Observable<Date> {
    // 每秒发射一次信号，然后映射为当前日期
    return interval(1000).pipe(
      map(() => new Date())
    );
  }
}

关键要点提醒 #

• 不要混淆Subscription和数据变量：Subscription是用来管理订阅的，不是用来存业务数据的
• 记得取消订阅：组件销毁时一定要清理订阅，否则会导致内存泄漏
• 优先使用RxJS内置操作符：官方提供的操作符已经帮你封装了很多细节（比如定时器的自动清理），比手动用setInterval更稳妥

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