Проблемы с наблюдаемым сбоем onQueryEvent при маршрутизации в Nativescript с Angular

Question

Я использую Nativescript с Angular и у меня написан код, который успешно вызывает onQueryEvent из nativescript-firebase-plugin для набора данных при первой сборке приложения. Однако после следования по маршруту ко второму компоненту, содержащему точно такой же onQueryEvent данные удается получить полный список, но пропускает onQueryEvent,

Честно говоря, я не знаю лучших практик для запросов в любой ситуации, не говоря уже об этой, поэтому я надеюсь, что это просто вопрос манипулирования тем, как я называю onQueryEvent,

Я считаю, что проблема в firebase.query внутри getMyTransactionList() функция firebase.service.ts файл.

overview.component.html страница имеет transaction | asyncRadListView который успешно фильтруется при запуске tns run android, Затем нажмите любую ссылку, указывающую на deal-summary.component.html страница, где функция повторяется, отказывается от запроса статическим storage переменная установлена ​​в firebase.service

Вот мой код:

firebase.service.ts

export class FirebaseService {

private _allItems: Array<any> = [];
items: BehaviorSubject<Array<any>> = new BehaviorSubject([]);
public storage: any = '-KomUSGcX-j6qQmY4Wrh'; // set statically to test different routes

constructor(
            private ngZone: NgZone,
            ){}

// fetch data

  getMyDealList(): Observable<any> {
    return new Observable((observer: any) => {
      let path = `deals/${BackendService.token}`;

        let onValueEvent = (snapshot: any) => {
          this.ngZone.run(() => {
            let results = this.handleSnapshot(snapshot.value);
             observer.next(results);
          });
        };
        firebase.addValueEventListener(onValueEvent, `/${path}`);
    }).share();              
  }


    getMyTransactionList(): Observable<any> {
    return new Observable((observer: any) => {

      let path = `transactions/${BackendService.token}`;

      // this is a merge of jen loopers giftler code combined with nativescrip-firebase-plugins standard onQueryEvent.  It works on the first load but routing to a second instance of the same function retrieves all the data without queryEvent
    let onQueryEvent = (snapshot: any) => {
          this.ngZone.run(() => {
            let results = this.handleSnapshot(snapshot.value);
             observer.next(results);
          });
        };

      firebase.query(
        onQueryEvent,
        `/transactions/${BackendService.token}`,
        {

            singleEvent: true,

            orderBy: {
                type: firebase.QueryOrderByType.CHILD,
                value: 'dealId' // mandatory when type is 'child'
            },

            range: 
              {
                  type: firebase.QueryRangeType.EQUAL_TO,
                  value: `${this.storage}` // this calls a static variable for testing consistency
              }
            ,

        }
    );

        firebase.addValueEventListener(onQueryEvent, `/${path}`);
        console.log("transaction Listener added");
    }).share();              
  }



  handleSnapshot(data: any) {
    //empty array, then refill and filter
    this._allItems = [];
    if (data) {
      for (let id in data) {   
        let result = (<any>Object).assign({id: id}, data[id]);
          this._allItems.push(result);

      }
      this.publishUpdates();
    }
    return this._allItems;
  }


 publishUpdates() {
    // here, we sort must emit a *new* value (immutability!)
    this._allItems.sort(function(a, b){
        if(a.date < b.date) return -1;
        if(a.date > b.date) return 1;
      return 0;
    })
    this.items.next([...this._allItems]);
  }
}

app.component.ts

<page-router-outlet></page-router-outlet>

overview.component.ts

 export class OverviewComponent implements OnInit {

    public deals: Observable<any>;
    public transactions: Observable<any>;

    constructor(private router: Router, 
                private firebaseS: FirebaseService,
                ){  }

  ngOnInit() {
    this.deals = <any>this.firebaseS.getMyDealList();
    this.transactions = <any>this.firebaseS.getMyTransactionList();
  }


  viewDealSumm(id){
         this.router.navigate(['dashboard/deal-summary', id]);
    }
}

overview.component.html

          <RadListView [items]="deals | async ">
                <ng-template tkListItemTemplate let-item="item">
                    <StackLayout (tap)="viewDealSumm(item.id)">
                         <Label [text]="item.dealName"></Label>
                       </StackLayout>
                    </ng-template>
                </ListViewGridLayout>
            </RadListView>





            <RadListView [items]="transactions | async " >
                  <ng-template tkListItemTemplate let-item="item">
                       <GridLayout>
                            <Label [text]="item.transName"></Label>
                       </GridLayout>
                   </ng-template>
            </RadListView>

Deal-summary.component.ts

export class DealSummaryComponent implements OnInit {

    public transactions: Observable<any>;

    constructor(
                private firebaseS: FirebaseService,
                         ){ }

  ngOnInit() {
    this.transactions = <any>this.firebaseS.getMyTransactionList();
  }

Сделка-summary.component.html

     <RadListView [items]="transactions | async " >
        <ng-template tkListItemTemplate let-item="item">
            <GridLayout >
                <Label col="1" [text]="item.transName"></Label>
            </GridLayout>
        </ng-template>
     </RadListView>