Angular 2+中Subject使用问题：workTime变量无结果求排查

我来帮你排查下这个问题哈，从你贴的代码来看，大概率是这几个常见原因导致的，咱们一个个梳理：

问题回顾 #

你尝试用Angular的Subject实现workTime变量的传递，但始终拿不到结果，相关代码如下：

Work.service.ts：

import { Subject } from "rxjs/Subject"; 
import "rxjs/Rx"; 
@Injectable() 
export class WorkService { 
  public $workTimeSubject: Subject<number> = new Subject(); 
  constructor() { } 
}

app.component.ts：

export class AppComponent implements OnInit{
  constructor(private _workService: WorkService) { }
  ngOnInit() {
    // 推测这里是订阅Subject的代码，但可能没写对或者没触发发送逻辑
  }
}

可能的原因及解决办法 #

1. 从未触发Subject发送值

Subject就像一个消息中转站，你得主动调用它的next()方法，它才会把值推送给订阅者。你的服务里只创建了Subject实例，但没有任何地方触发它发送数据。

给你的WorkService添加一个发送值的方法：

// 在WorkService中新增
updateWorkTime(time: number) {
  this.$workTimeSubject.next(time);
}

然后在组件或其他需要更新时间的地方调用这个方法，比如：

// 比如在AppComponent的某个交互方法里
this._workService.updateWorkTime(8); // 把8这个值发送给所有订阅者

2. 订阅时机晚于值的发送时机

Subject是热可观察对象，它不会缓存之前发送过的值。如果你先调用updateWorkTime发送了值，之后才去订阅，那订阅者是收不到这个值的。

举个错误示例：

// 先发送值
this._workService.updateWorkTime(8);
// 再订阅
this._workService.$workTimeSubject.subscribe(time => {
  console.log(time); // 这里啥都不会输出
});

这种情况换用BehaviorSubject就能解决，它会缓存最新的一个值，新订阅者一上来就能拿到这个缓存值：

// 修改WorkService的Subject为BehaviorSubject
import { BehaviorSubject } from "rxjs/BehaviorSubject";

@Injectable() 
export class WorkService { 
  // 可以设置一个默认值，比如0
  public $workTimeSubject: BehaviorSubject<number> = new BehaviorSubject(0); 
  constructor() { } 

  updateWorkTime(time: number) {
    this.$workTimeSubject.next(time);
  }
}

3. 订阅代码缺失或服务未正确注入

首先确保你的WorkService已经在Angular的依赖注入系统中注册（比如在模块的providers数组里声明），然后在AppComponent的ngOnInit里正确订阅：

ngOnInit() {
  this._workService.$workTimeSubject.subscribe(workTime => {
    console.log(workTime); // 现在能收到发送的值了
    this.workTime = workTime; // 把值赋值给组件的workTime变量
  });
}

4. RxJS版本的导入兼容性问题

如果你的项目用的是RxJS 6及以上版本，旧的导入方式会有问题，得改成按需导入：

// RxJS 6+的正确导入方式
import { Subject } from 'rxjs';
// 如果需要用操作符，单独导入，比如map
import { map } from 'rxjs/operators';

之前的import "rxjs/Rx";在新版本里不推荐，容易导致打包体积过大或者兼容性问题。

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