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

在标题中，您必须订阅function onTelephoneSelect(id, status, e) {中的某个活动。您的购物车组件将发出相同的事件。

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

Answer 3

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

Answer 4

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

Dependency injection和hierarchical dependency injection

Answer 5

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

11000010 10101001

运行此选项后，您的输出可能类似于

ng g service data

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

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

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

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

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

现在创建一个功能，将您的数据保存在 data.service.ts

中

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

@Injectable()
export class DataService {

  constructor() { }

}

现在位于 app.component

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

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

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

在控制台中输出

您好！我这里有一些数据..

快乐编码

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

5 个答案: