Javascript 两个组件之间通过共享服务的角度2/4通信

我正在尝试构建一个简单的购物车应用程序。 我有两个组件和一个购物车服务，如下所示

<app-header></app-header>

<app-cart></app-cart> 

In-cart服务具有向购物车添加商品、删除购物车中的商品、购物车数量等所有功能

当用户向购物车添加产品时，我需要更新header组件中的购物车计数

---

如何使用共享服务完成此操作。

在标题中，您必须订阅共享服务中的某些事件。您的购物车组件将发出相同的事件

---

请看一下这个plunkr

在这种情况下，您可以使用带有主题的服务。Angular中的服务是单实例，这意味着它作为单个实例进行管理。因此，如果每个组件都访问服务，它们将访问相同的共享数据

export class cartService{
    private prodCount = 0;
    prodCountCountChange: Subject<number> = new Subject<number>();
    UpdateCount(count: number) {
        this.prodCount = count;
        this.prodCountCountChange.next(this.prodCount);
    }
}

---

您应该使用RxJs中的主题。在购物车中，您将订阅服务中的某个计数器，以便能够在应用程序标题中更新购物车信息。

在应用程序中，如果某个服务来自同一祖先，则组件将共享该服务的实例。例如，您的应用程序标题和应用程序购物车是AppModule的一部分。因此，如果将SharedCartService添加到模块的providers数组中，这两个组件将获得该服务的相同实例

和

通过以下方式创建服务：-

ng g service data

运行此命令后，您的输出可能如下所示

installing service
   create src\app\data.service.spec.ts
   create src\app\data.service.ts
   WARNING Service is generated but not provided, it must be provided to be used

该警告只是意味着我们必须将其添加到src/app/app.module.ts中NgModule decorator的providers属性中，所以让我们这样做：

import { DataService } from './data.service';

@NgModule({
   providers: [DataService],
})

现在我们已经创建了一个服务，让我们来看看角CLI创建的是什么：

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

@Injectable()
export class DataService {

  constructor() { }

}

现在创建一个将数据保存在data.service.ts中的函数

现在在app.component中

要在另一个组件中获取数据，只需导入我们的服务并调用getData函数

控制台中的输出

你好!！我这里有一些数据

---

快乐编码

问题是什么-如何创建共享服务或如何从一个组件到另一个组件？

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

@Injectable()
export class DataService {

  constructor() { }

}

constructor() { }
 public currentData: any;
 storeData(dataFromComponent){
   this.currentData = dataFromComponent;
 }
 getData(){
   return this.currentData; 
 }

 import { DataService } from './data.service';

 export class AppComponent {

  constructor(private dataService:DataService) {

  }
   anytimeSaveData(){
      // to store data in service call storeData function
     this.dataService.storeData("Hello! I have some data here..");
   }
}

 export class HomeComponent {

  constructor(private dataService:DataService) {

  }
      // to get data from service call getData function
     console.log(this.dataService.getData());
}