2017-02-22 85 views
0

我创建了一个简单的应用程序,其中包含2个组件和一个服务,以显示如何通过让一个组件更新另一个组件已订阅的服务中的值来将项目添加到购物篮。使用this Plunker示例,您可以看到服务获取了更新的值,但是当您单击篮子的值时,您将看到组件中篮子中的项目数保持为0(使用console.log)。如何让组件与服务匹配相同的值?Angular 2使用服务更新组件

我认为这可能是因为我的主页是这样的,所以它将组件视为单独的应用程序,因此创建了2个服务。我不想在一个根应用程序中拥有所有角度组件。

<body> 
    <div> 
     Basket Holder<fc-basket>loading basket...</fc-basket><br/><br/> 
    </div> 
    <my-app> 
    loading... 
    </my-app> 
    </body>` 
+0

创建另一个实例,而使用模块级实例

我解决你的所有plunker实际的代码。没有查看原始代码很难得到正在发生的事 –

回答

2

问题是,您提供basketService 3次,并有3个实例的篮子服务与自己的订阅流。

  • 在应用模块级,当你在app.module
  • 在个别组件级别

定义你不需要provides[service]在你组件,如果你已经在你的模块中做到了。否则会在resolved plunker

+0

辉煌,谢谢你。 –

+0

投票并接受它。它会帮助别人 –