Asyn c Pipe не работает при переходе на другой маршрут и обратном посещении

Question

Компонент работает должным образом при непосредственном посещении маршрута или даже при первом посещении. При переходе к другому маршруту и ​​возвращении к тесту шаблон компонента не работает. Похоже, что труба asyn c сломалась. Зависает в #loading, однако подписки работают, потому что console.log каждый раз регистрирует данные. Я попытался вызвать функцию load () в конструкторе, в Oninit и вне paramMap.

angular: 9.0.7
rxjs:  6.5.5

test.component.ts

    import { Component, OnInit } from '@angular/core';
    import { ActivatedRoute } from '@angular/router';
    import { GameService} from '../game.service';
    import { Observable } from 'rxjs';
    import { User } from '../user.model';

    @Component({
    selector: 'app-test',
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.css']
    })

   export class TestComponent implements OnInit {
   seatsInfo$: Observable<any>; //seats

   player1$: Observable<User>; //player profile
   player2$: Observable<User>;
   player3$: Observable<User>;
   player4$: Observable<User>;


  constructor(public game: GameService, private _Activatedroute:ActivatedRoute) {
  }


  load() {
    this.seatsInfo$ = this.game.getSeatsInfo();

    this.seatsInfo$.subscribe(data=>{
      console.log("seatsInfo");
      console.log(data);
      if(data.s1) {
        console.log("player 1");
           this.player1$ =  this.game.getPlayersInfo(data.s1); 
           this.player1$.subscribe(d=>{
 console.log(d);
 console.log("everything logs, every time.");
});
          }

      }

  ngOnInit(): void {
    this._Activatedroute.paramMap.subscribe(params => {
     // this.game.setTableReference(params.get('id')) 
      this.game.setTableReference('demo'); //manual
      this.load();
    });

}


}

test.component. html

  <div *ngIf="(seatsInfo$ | async) as seatsInfo; else loading">
    <span class="p1">
    <div *ngIf=" (player1$ | async) as player; else vacant1">
    {{player.displayName}}
    </div>
    <ng-template #vacant1>
        <div>seat 1 empty</div>
    </ng-template>
    </span>
    </div>
<ng-template #loading>
loading... 
</ng-template>

game.service.ts

import { Injectable } from '@angular/core';
import { AuthService } from './auth.service';
import { AngularFireDatabase } from '@angular/fire/database';
import {
  AngularFirestore,
  AngularFirestoreDocument
} from '@angular/fire/firestore';
import { seatModel } from './table/seatModel';
import { User } from './user.model';
import { Observable, of, forkJoin } from 'rxjs';
import { tap, map, switchMap, first } from 'rxjs/operators';



@Injectable({
  providedIn: 'root'
})
export class GameService {
table_reference;

  constructor(public auth: AuthService, private db: AngularFireDatabase,private afs: AngularFirestore) {    

                 }

  setTableReference(id) {
    this.table_reference = id;
  }

  getSeatsInfo(): Observable<any> {
   return this.db.object<seatModel>(`table/${this.table_reference}`).valueChanges();
  }

  getPlayersInfo(uid): Observable<any> {
      return this.afs.doc<User>(`users/${uid}`).valueChanges();
    }

}