从页面/组件中的服务共享相同的可观察量

Question

我正在尝试多次订阅相同的Observable，但它不起作用。我有一个提供程序，它为我提供了来自AngularFirestore对象的Observable。这是我的提供者：

@Injectable()
export class MyProvider {
private myObservable: Observable<any>;
constructor(private aFs: AngularFirestore) {
//retriving some data and putting in myObservable
}
getObservable() {
return this.myObservable;
}
}

在我的myPage.ts中，我做到了：

this.mySubscription = this.myProvider.getObservable().subscribe(value => {
//something that works
});

在另一个组件中，我做同样的事情，但它没有给我任何东西。如何从服务或提供商共享Observable？我尝试unsubscribe()它，当我从我的页面弹出到组件时，当我调用组件上的unsubscribe()然后导航到我的页面时，它不起作用，subscribe()不起作用。

要在我的页面中unsubscribe()，我这样做：

ionViewWillLeave() {
this.mySubscription.unsubscribe();
}

为了unsubscribe()我的组件，在导航到我的页面之前，我做了：

myEvent() {
this.mySubscription.unsubscribe();
this.navCtrl.push(MyPage);
}

当我从MyPage弹出时，unsubscribe()似乎工作正常，因为我可以在组件中看到myObservable数据。当我尝试从我的组件导航到MyPage时，unsubscribe()似乎不起作用，因为我什么也看不到。我也尝试了调试，但在第二种情况下我看不到任何subscribe()。

我在providers下的app.module.ts中导入我的提供程序，然后将其导入我的页面：

我的页面

import { MyProvider } from ..;

构造函数 (MyPage.ts(：

constructor(private myProvider: MyProvider) {..}

在我的组件中：

MyComponent.ts

import { MyProvider } from ..;

构造函数 (Home.ts(

constructor(private myProvider: MyProvider) {..}

我澄清一下，MyComponent没有用于MyPage！我在Home中使用它，然后用它来推送到MyPage。我这样做是因为我想在MyComponent中显示简单的数据，然后我想推送到包含数据详细信息的MyPage。

我很容易在组件和页面上共享从服务派生的相同 Observable，并且我想在两者上subscribe()它。这可能吗？

Answer 1

如果你的目标是多播数据，请使用RXJS的Subject或BehaviorSubject
Subject充当源Observable和许多observers之间的桥梁/代理，使多个observers可以共享相同的Observable执行。
这种推荐的公开主体方法是使用asObservable()运算符。

@Injectable()
export class MyProvider {
private myObservable=new Subject<any>();
CurrentData = this.myObservable.asObservable();
constructor(private aFs: AngularFirestore) {
//your logic
this.myObservable.next(value);//push data into observable
}

}

页面.ts

this.mySubscription = this.myProvider.CurrentData.subscribe(value => {
//something that works
});

使用行为主体

@Injectable()
export class MyProvider {
private myObservable=new BehaviorSubject<any>('');
CurrentData = this.myObservable.asObservable();
constructor(private aFs: AngularFirestore) {
}
getData(myParam): void { 
someasynccall.pipe(map(),filter()).
subscribe(value=>this.myObservable.next(value))

}

页面.ts

this.myProvider.getData(param);
this.mySubscription = this.myProvider.CurrentData.subscribe(value => {
//something that works
});

Subject vs BehaviorSubject

LiveDemo