angular 2 subscribe shareService 工作两次或多次答案

【问题标题】：angular 2 subscribe shareService working twice or several timesangular 2 subscribe shareService 工作两次或多次
【发布时间】：2016-10-07 00:57:13
【问题描述】：

我有一个 Angular 2 的 ShareService，

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

它是我的另一个组件和subscibeCheckUser；

***********************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);

            }

        });

我的问题是我执行一次this.isLogin$.next(bool) 但订阅函数执行两次或多次！！！我的购物篮功能是一个 xhr 请求，这意味着当用户登录时，我收到了对服务器的多个请求！！！我无法修复它...我不知道这个问题是否与 angular 2 有关，有人有这个问题吗？最近几天我参与了这个问题！

【问题讨论】：

同stackoverflow.com/questions/37654458/…。请提供 Plunker 进行复制。

标签： javascript angularjs typescript angular rxjs

【解决方案1】：

问题是您的shareService 正在获取多个实例。

其中一个解决方案是强制服务为单例。

这样的事情应该可以工作：

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*/);
    }
  })
];

当前构造函数所需的所有内容都应该放在上面写着constructor args的位置

现在在您的组件上，您可以像这样使用服务：

@Component({
  providers: [SHARE_SERVICE_PROVIDER]
})

然后你可以像往常一样调用它。

另一种解决方案是将您当前的服务注入应用程序的主要组件。请参阅here 了解更多信息。

【讨论】：

我从 "./shareService" 导入导入 {SHARE_SERVICE_PROVIDER};但是当调用_shareService。 CheckUser.subscribe，我收到错误 Checkuser is not defined！请帮助我如何使用它
您添加了constructor(_shareService: shareService) 吗？
绝对是的...我有一个 shopService 并从 shareService 提供数据...我的 shopService 是可注入的（）并导入到 3 个组件...我通过在 constructor(){ alert() } 中推送警报来测试它，警报函数执行了 3 次...而我的`_shareService.CheckUser.subscribe()` 函数也执行了 3 次...这意味着我的构造函数执行了导入自己的服务的次数...如何解决？我只想执行一次:(
你的shareService构造函数有什么参数？
什么都没有！！是空的，我的 shareService 中不需要任何东西

【解决方案2】：

问题是服务是单例的，组件每次创建时都会订阅它，或者（我没有看到完整的代码）在

_shareService.CheckUser.subscribe

被放置，所以 CheckUser 应该是一个返回 Observable 的方法。如果你有 plunkr 我可以编辑它。另一个语义问题是 observable 应该以 $ 而不是 BehaviorSubject 结尾。

【讨论】：