angular 2 subscribe shareService 工作两次或多次

Posted 2023-03-13

【中文标题】angular 2 subscribe shareService 工作两次或多次

【英文标题】：angular 2 subscribe shareService working twice or several times

【发布时间】：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 有关，有人有这个问题吗？ 最近几天我参与了这个问题！

【问题讨论】：

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

【参考方案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 结尾。