角2订阅shareService工作两次或几次

Question

I have a ShareService in angular 2,

******************************shareService*************************
import { BehaviorSubject , Subject}    from 'rxjs/Rx';
import { Injectable } from '@angular/core';


@Injectable()
export class shareService {


    isLogin$:BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
    CheckUser = this.isLogin$.asObservable();
    public isLogin (bool){
        this.isLogin$.next(bool);
    }
}

and its my another component and subscibe the CheckUser ;

***********************another Component*******************************

        _shareService.CheckUser.subscribe((val) =>{
            *********all of this scope execute for several times just i have one another component and one next function*******
            this.isLogin = val;
            alert(val);
            if(this.isLogin){

                console.log("req req req");
                this.MyBasket();

            }
            else if(this.ext.CheckLocalStorage("ShopItems")){

                    this.ShopItems = JSON.parse(localStorage.getItem("ShopItems"));
                    setTimeout(() => {
                        _shareService.sendShopItems(this.ShopItems);
                    },100);

            }

        });

my problem is i execute once this.isLogin$.next(bool) but subscribe function execute twice or several times !!!! my basket function is an xhr request this means when user loged in i get the several request to server!!!i cant fix it...i dont know this problem is for angular 2 or not,Anyone have this problem?? last a few days i Involved in this problem!

Answer 1

The problem is that your shareService is getting multiple instances.

One of the solutions is forcing the service to be a singleton.

Something like this should work:

import { provide, Injectable } from '@angular/core';

@Injectable()
export class shareService {
  private static instance: shareService = null;

  // Return the instance of the service
  public static getInstance(/*Constructor args*/): shareService {
    if (shareService.instance === null) {
       shareService.instance = new shareService(/*Constructor args*/);
    }
    return shareService.instance;
  }

  constructor(/*Constructor args*/) {}
}

export const SHARE_SERVICE_PROVIDER = [
  provide(shareService, {
    deps: [/*Constructor args dependencies*/],
    useFactory: (/*Constructor args*/): shareService => {
      return shareService.getInstance(/*Constructor args*/);
    }
  })
];

Everything that is required on your current constructor should be placed where it says constructor args

Now on your components you use the service like this:

@Component({
  providers: [SHARE_SERVICE_PROVIDER]
})

And then you can call it like you usually do.

Another solution would be injecting your current service on the main component of the app. See here for more info.

Answer 2

The problem is that the service is singleton and the component subscribe to it each time it created or (I don't see the full code) at the point the

_shareService.CheckUser.subscribe

is placed , so CheckUser should be a method that returns an Observable . if you have plunkr I can edit it . Another semantic problem is that the observable should end with $ and not the BehaviorSubject.