RXJS Observable - 如何从 Observable 的构造函数外部调用 next

RXJS Observable - How to call next from outside of the Observable's constructor

我正在构建一个公开 Observable 的服务。在此服务中,我收到外部函数调用,这些函数调用应触发对 Observable 的下一次调用,以便各种消费者获得订阅事件。在 Observer 构造函数期间,我可以调用 next 并且一切正常,但是我如何在构造函数之外访问它以便外部触发器可以触发 next 调用?

private myObservable$: Observable<any>;

在服务初始化期间我这样做

this.myObservable$ = new Observable(observer => {
    observer.next("initial message");
}

然后在同一服务的其他方法中,我希望能够执行类似

的操作
this.myObservable$.observer.next("next message");

以上显然行不通,但我该如何实现这个目标呢?

我假设我遗漏了一些基本的东西,因为必须有一种方法可以在 Observable 的初始构造函数之外发出更多消息

您应该为此创建一个 Subject

this.myObservable$ = new Subject();

然后您可以随时调用:

this.myObservable$.next(...);

或使用订阅:

this.myObservable$.subscribe(...)

两种方式:

  1. 使 myObservable$ public:

    public myObservable$: Observable;
    
  2. 将 observable 封装在一个主题流中,并提供一个 helper 来调用 next:

    export class TestService {
      public myObservable$: Observable;
      private _myObservableSubject: Subject;
    
      constructor() {
        this._myObservableSubject = new Subject();
        this.myObservable$ = this._myObservableSubject.asObservable();
      }
    
      public NextMessage(message?: string): void {
        this._myObservableSubject.next(message);  
      }
    }
    

实际上Subject同时用于发布者和订阅者,这里我认为你只需要发布你的值,所以简单地使用Observable。

通过使用 observable,将 Subscriber 分配给 class level 变量然后使用它,如下面的代码

subscriber: Subscriber<boolean>;

public observe(): Observable<boolean> {

    return new Observable<boolean>(subs => {
      this.subscriber = subs;
    });
  }

public callNext() {

    if (this.subscriber) {
      this.subscriber.next();
      this.subscriber.complete();
    }
  }

Observable:您必须从构造函数内部调用 next() 函数,并且只能订阅一次

message = new Observable((observer)=>{
   observer.next(9);
})
     
this.messsage.subscribe((res)=>{
   console.log(res)
})

output: 9

主题: 您必须从构造函数外部调用 next() 函数,并且您可以多次订阅。 subject 在订阅之前不存储任何初始值。

messsage = new Subject()
this.messsage.next(3)
this.messsage.subscribe((res)=>{
   console.log(' A '+res)
})
this.messsage.next(4)
this.messsage.next(5)
this.messsage.subscribe((res)=>{
   console.log(' B '+res)
})
this.messsage.next(6)

output: 
A 4
A 5
A 6
B 6

BehaviorSubject: 您必须从构造函数外部调用 next() 函数,并且您可以多次订阅。 BehaviorSubject 在订阅之前只存储一个初始值。

messsage = new BehaviorSubject ()
this.messsage.next(3)
this.messsage.subscribe((res)=>{
   console.log(' A '+res)
})
this.messsage.next(4)
this.messsage.next(5)
this.messsage.subscribe((res)=>{
   console.log(' B '+res)
})
this.messsage.next(6)
        
output: 
A 3
A 4
A 5
B 5
A 6
B 6

我最终结合了几件事:

  • ,很好地展示了 Subject 的易用性
  • ,它正确地指出我们只想要一个 Observable 暴露的
  • 一种更实用的方法,因为 thisClass 让我不寒而栗
  • 通用的 TypeScript 类型
const createObservableWithNext = <T>(): {
  observable: Observable<T>;
  next: (value: T) => void;
} => {
  const subject = new Subject<T>();
  const observable = subject.asObservable();

  const next = (value: T) => subject.next(value);

  return {
    observable,
    next,
  };
};