Angular 在页面/组件中共享来自服务的相同可观察内容

我多次尝试订阅相同的

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;
  }
}

在另一个组件中，我也这样做，但它没有给我任何东西。如何共享服务或提供商提供的

可观察的
？我尝试过
unsubscribe（）
它，当我从我的页面弹出到组件时，它会工作；当我调用组件上的
unsubscribe（）
然后导航到我的页面时，
subscribe（）
不工作

要在我的页面中取消订阅（）
，我需要：

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

要在我的组件中
unsubscribe（）
，在导航到我的页面之前，我需要执行以下操作：

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

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

我在
providers
下的
app.module.ts
中导入我的提供商，然后在我的页面中导入它：

MyPage.ts

import { MyProvider } from ..;

构造函数（MyPage.ts）：

在我的组件中：

MyComponent.ts

import { MyProvider } from ..;

构造函数（Home.ts）

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

很容易，我想在组件和页面上共享从服务检索到的相同的可观察内容，我想在这两个组件上都
subscribe（）
it。这可能吗？
如果您的目标是多播数据，请使用RXJS的
主题
或
行为主题


主题
充当源
可观察
和许多
观察者
之间的桥梁/代理，使得多个
观察者
可以共享相同的
可观察
执行。

建议使用
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
  }


}

使用行为主题

 @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))


    }


如果您的目标是多播数据，请使用RXJS的
主题
或
行为主题


主题
充当源
可观察
和许多
观察者
之间的桥梁/代理，使得多个
观察者
可以共享相同的
可观察
执行。

建议使用
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
  }


}

使用行为主题

 @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))


    }


您确定该提供商是作为单例提供的吗？不，我也这么认为，但我不明白如何使其成为单例。我正在使用typescript，这是我第一次尝试提供程序。你能告诉我你在哪里提供/导入该提供程序吗？我更新了问题。分享你的app.module.ts。你确定该提供程序是作为单例提供的吗？不，我也这么认为，但我不明白如何才能使其成为单例。我正在使用typescript，这是我第一次尝试提供程序。你能显示你在哪里提供/导入提供程序吗？我更新了问题。共享你的app.module.ts。如果我想使用参数拨打电话，我该怎么办？我需要依赖于传递给提供程序的参数的currentData。Like
getData（myParam）：可观察{//dothings-Like-filter或map；myObservable.subscribe（value=>{this.currentData.next（value）}）；返回this.currentData.asObservable（）；}
您正在进行
Http
呼叫吗？我不完全理解您的要求，但您不能从
subscribe
回调返回值您正在使用异步编程您需要等待，直到您的订阅得到解决，然后采取适当的操作我已经更新了我的代码并提供了一个wroking stackblitz看，你的代码是对的，我是这样想的，但我所考虑的行为是不同的。behaviorSubject每次“传递”给我一个不同的Observable，我使用下一个方法添加Observable，因此每次添加我必须添加的内容。next（[]）之前，因为我可以在新调用中可视化旧值。如果我想使用参数进行调用，我该怎么做？我需要依赖于传递给提供程序的参数的currentData。Like
getData（myParam）：可观察{//dothings-Like-filter或map；myObservable.subscribe（value=>{this.currentData.next（value）}）；返回this.currentData.asObservable（）；}
您正在进行
Http
呼叫吗？我不完全理解您的要求，但您不能从
subscribe
回调返回值您正在使用异步编程您需要等待，直到您的订阅得到解决，然后采取适当的操作我已经更新了我的代码并提供了一个wroking stackblitz看，你的代码是对的，我是这样想的，但我所考虑的行为是不同的。behaviorSubject每次“传递”给我一个不同的Observable，我使用下一个方法添加Observable，因此每次添加我必须在前面添加的内容。next（[]），因为我可以在新调用中可视化旧值。
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))


    }

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