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

Question

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

<app-header></app-header>
<app-cart></app-cart> 

在购物车服务中具有将物品添加到购物车，删除购物车的所有功能，购物车的数量等。

用户将产品添加到购物车时，我需要在标题组件中更新购物车计数。

如何使用共享服务进行操作。

Answer 1

在这种情况下，您可以使用 subject 的服务。Angular中的服务是单身人士，这意味着它被视为一个实例。因此，如果每个组件访问服务，它们将访问相同的共享数据。

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

在您的组件中可以做到这一点，

  this._cartService.UpdateCount(this.prod.length);

Answer 2

在标题中，您必须在Shared Service中订阅某些事件。同一事件将从您的购物车组件中发出。

请查看此plunkr https://plnkr.co/edit/ls1uqb?p=preview

Answer 3

您应该使用RxJs中的Subject。在您的购物车中，您将订阅服务中的某些计数器，因此您可以在app-header中更新购物车信息。

Answer 4

在Angular中，组件来自同一祖先，将共享服务的实例。例如，您的app-header和app-cart WICH是AppModule的一部分。因此，如果将SharedCartService添加到模块的providers数组中，则两个组件将获得该服务的相同实例。

依赖注入和分层依赖注入

Answer 5

创建服务： -

ng g service data

运行此操作后，您的输出可能看起来像

installing service
   create srcappdata.service.spec.ts
   create srcappdata.service.ts
   WARNING Service is generated but not provided, it must be provided to be used

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

import { DataService } from './data.service';
@NgModule({
   providers: [DataService],
})

现在我们已经创建了一项服务，让我们看一下Angular CLI创建的内容：

import { Injectable } from '@angular/core';
@Injectable()
export class DataService {
  constructor() { }
}

现在创建一个在 data.service.ts

中保存您的数据的函数

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

现在在 app.com.ponent

 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..");
   }
}

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

 export class HomeComponent {
  constructor(private dataService:DataService) {
  }
      // to get data from service call getData function
     console.log(this.dataService.getData());
}

在控制台中输出

你好！我在这里有一些数据。

快乐编码