Angular Observed Subscription Reserve?

Question

I am using Angular 4, and I have a component that lives on the path "player /: id" in my application. When a player navigates to this route from the application, I use currentPlayerService to synchronize the current player in the application. This works great with the code below.

this.currentPlayerService.getPlayer()
  .subscribe((player) => this.currentPlayer = player);

However, when the application loads directly onto the 'player /: id' route (from an external link), I can comment on the above and use the code below to set currentPlayer from the route parameters.

this.route.params.subscribe(params => {
  this.playerService.getPlayer(params.id)
    .subscribe((player) => {
      this.currentPlayer = player;
      this.currentPlayerService.setPlayer(player);
    });
 });

What I would like to do (and it’s hard for me to find a way to program a “reactive function”) is to load the player from the parameters only if this.currentPlayerService.getPlayer () does not matter for the load. I find it difficult to understand how to use Observable in some kind of logical control flow, so any help would be appreciated.

Thank!

Answer 1

Own observations are stateless. To track a value (or current value), you need to use either Subject, or BehaviorSubject.

In currentPlayerServicecreate BehaviorSubject, called playerBSubject:

export class CurrentPlayerService{
  public playerBSubject: BehaviorSubject<any>;//can be type of Player if you have such type
  constructor(){
    this.playerBSubject = new BehaviorSubject({})//any value that you want to initialize
  }

  getPlayer(){
    //do your logic here, whatever that is.
    //I am using an Observable.of to mimic a http request
    Observable.of({})
      .subscribe((player)=>{
      this.playerBSubject.next(player)//this will update the subject with the latest value
    });
    return this.playerBSubject.asObservable();
  }

}

, .next() , , .asObservable().

, , , BehaviourSubject ( ), playerService.getPlayer(), .

this.route.params.subscribe(params => {
    //check if BehaviorSubject exist or not
    if (this.currentPlayerService.playerBSubject.getValue() === {}) {
        this.playerService.getPlayer(params.id)
            .subscribe((player) => {
                this.currentPlayer = player;
                this.currentPlayerService.setPlayer(player);
            });
    }
});

:

, , currentPlayerService playerService. currentPlayerService "" , , BehaviorSubject . .

export class PlayerService {
    public playerBSubject: BehaviorSubject<any>;

    constructor() {
        this.playerBSubject = new BehaviorSubject({})
    }

    getPlayer(id) {
        Observable.of({id}) // implement your own logic
            .subscribe((player) => {
                this.playerBSubject.next(player)
            });
        return this.playerBSubject.asObservable();
    }

    setPlayer(id) {
        return Observable.of({id})//implement your own logic
            .subscribe(newPlayer => this.playerBSubject.next(newPlayer))
    }
}

, , :

this.currentPlayer = this.playerService.playerBSubject.getValue();

asObservable :

this.playerService
    .asObservable()
    .subscribe(player => {
        if (player === {}) {
            this.route.params.subscribe(params => {
                this.playerService.getPlayer(params.id); //voila, your player is updated
            })
        }
        //remember to update the value
        this.currentPlayer = player
    })