https://rxjs-dev.firebaseapp.com/guide/subject
Subject可以实现多播。
一个使用场景：比如在父组件里初始化一个subject, 提供一个函数作为对外获取这个subject的入口，
子组件通过这个函数订阅这个subject, 等待父组件发号司令(往这个subject里放值)后，子组件同时做出各自的动作，比如发射值。
以官网例子，简单解释
import { Subject } from 'rxjs';
const subject = new Subject<number>(); //初始化一个subject
subject.subscribe({ //产生订阅者1
next: (v) => console.log(`observerA: ${v}`)
});
subject.subscribe({//产生订阅者2
next: (v) => console.log(`observerB: ${v}`)
});
subject.next(1); //给subject喂值的时候，上面2位订阅者就能收到这个值，并且各自打印信息
subject.next(2);//给subject喂值的时候，上面2位订阅者就能收到这个值，并且各自打印信息
subject.subscribe({//产生订阅者3，在父组件发出值之后订阅，它收不到父组件的值，BehaviorSubject可以让她收到
next: (v) => console.log(`observerC: ${v}`)
});
BehaviorSubject可以缓存最后一个发出的值，所以只要有订阅者订阅，它会立刻收到最后一个值。如果你有这样的使用场景，那么就要在父组件里声明一个BehaviorSubject对象，而不是Subject对象。
下面是我的使用场景和代码
父组件里声明用于广播的subject：
subject = new Subject<any>();
//用于发号司令，以通知子组件emit各自的值出来， 这里的value可以做不同用途，比如这个subject我既用于做create，也用于做update， 那么我可以发射不同的值，比如create, update用于告诉子组件现在是收集什么场景下的值，因为可能不同的场景需要做额外处理。
broadcastReadySignal(value: any) {
this.subject.next({message: value})
}
clearMessage() { // 一轮广播结束后，即使用结束后， 清除订阅。
console.log('[DEBUG]clear RXJS subject message')
// this.subject.next(null);
this.subject.unsubscribe();
}
getMessage(): Observable<any> {//用于给子组件调用，以获得父组件的subject句柄
return this.subject.asObservable();
}
//主要的触发接口，createJob的时候触发广播事件，以通知各子组件emit各自的值出来，在这里前端使用的是vue,通过vue的响应式更新可以收集到子组件emit出来的值。
createJob() {
this.broadcastReadySignal('create');
//other codes...
}
所有子组件都这么写，mounted()或者created()[这是vue的生命周期方法]里，订阅父组件的subject，一旦收到父组件的值后，就做this.$emit('update:data', this.formData)这个动作。这个动作就是弹射出子组件的Form的值以更新父组件的data， 这两个值是绑定的，是父子组件数据沟通的地方：
mounted() {
//this.formData = this.data;
this.jobOperate.getMessage().subscribe((next: any) => {
this.$emit('update:data', this.formData)
})
}
如果你看不懂this.$emit('update:data', this.formData)，那就先看看Vue的Sync修饰符：
https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier
网友评论