从页面/组件中的服务共享相同的 Observable

我正在尝试订阅相同的内容Observable多次但不起作用。我有一个提供者可以为我提供Observable from AngularFirestore目的。这是我的提供者：

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

  getObservable() {
    return this.myObservable;
  }
}

In my myPage.ts I do:

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

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

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

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

To unsubscribe()在我的组件中，在导航到我的页面之前，我会执行以下操作：

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

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

我将我的提供商导入到app.module.ts under providers然后我将其导入到我的页面中：

我的页面.ts

import { MyProvider } from ..;

构造函数（MyPage.ts）：

constructor(private myProvider: MyProvider) {..}

在我的组件中：

我的组件.ts

import { MyProvider } from ..;

构造函数（Home.ts）

constructor(private myProvider: MyProvider) {..}

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

我想轻松地共享从组件和页面上的服务检索到的相同 Observable，并且我想subscribe()两者都有。这可能吗？

如果您的目标是多播数据，请使用 RXJSSubject or 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
  }


}

Page.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))


    }

Page.ts

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

Subject vs BehaviorSubject

LiveDemo