共有サービスによる2つのコンポーネント間の角度2/4通信

Question

私は簡単なショッピングカートアプリケーションを構築しようとしています。 私は次のような2つのコンポーネントとカートサービスを持っています。カートサービスで

<app-header></app-header> 

<app-cart></app-cart> 

カートに商品を追加行うためのすべての機能を有し、カート内のアイテムを削除し、カート量等

私はときに、ユーザヘッダコンポーネントでカートの数を更新する必要がカートに商品を追加します。

共有サービスでそれを行う方法。

Answer 1

を見てください、あなたはsubjectでサービスを利用することができます。 Angularのサービスはシングルトンであり、単一インスタンスとして管理されます。したがって、各コンポーネントがサービスにアクセスする場合、それらは同じ共有データにアクセスします。あなたはRxJsからSubjectを使用する必要があり、あなたがこれを行うことができ、あなたのコンポーネントで

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

。あなたのカートでは、あなたのサービスのいくつかのカウンターを購読するので、app-headerのカート情報を更新することができます。

Answer 4

コンポーネントが同じ祖先からのものである場合、各コンポーネントはサービスのインスタンスを共有します。たとえば、app-headerとapp-cartはAppModuleの一部です。したがって、モジュールのprovidersアレイにSharedCartServiceを追加すると、2つのコンポーネントは同じサービスのインスタンスを取得します。

Dependency injectionとhierarchical dependency injection

Answer 5

によるサービスを作成します - これを実行する際に

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デコレータのprovidersプロパティにあるので、それをやりましょう：

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

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

今、私たちがサービスを作成したので、のは角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です。別のコンポーネント内のデータを取得するためのコンポーネント

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()); 
} 

出力機能

こんにちはのgetData呼んで！私は...ここにいくつかのデータを持っている

ハッピーコーディング