兄弟構成要素間の通信方法

Question

私は新しい角度になっています。間違ったことや間違ったやり方をしているかどうか教えてください。

私はfoodDetailsコンポーネントを持っています。ここでは、buynowボタンをクリックすると、食品が配列にプッシュされます。

ShopDataServiceヘッダコンポーネントでiは、ユーザがfoodDetails成分にbuynowボタンをクリックすると、製品アレイ毎回の長さを表示しておきたい、foodDetails成分とheaderComponent間で使用される一般的なサービスです。ではfoodDetailsのコンポーネントでbuynowをクリックすると、ヘッダーコンポーネントに通知する方法です。

export class ShopDataService { 
    products: any[]; 
    constructor() { 
     this.products = []; 
    } 
    add(product: any) { 
     this.products.push(product); 
    } 
    get() { 
     return this.products; 
    } 
} 

FoodDetailsコンポーネント：ここ

buynow(product){ 
    this.ShopDataService.add(product); 
} 

私のHTMLコンテナの構造である：

<div class="container"> 
    <prac-header></prac-header> 
    <router-outlet></router-outlet> 
</div> 

ヘッダコンポーネントは、ルータ出口

でfoodDetailコンポーネントに対し、PRACヘッダであります

Answer 1

私の意見では、兄弟コンポーネント間で通信する最も良い方法は、サービス：

サービス

export class Service { 
    private valueObs: BehaviorSubject<string> = new BehaviorSubject<string>(null); 

    public setValue(value: string):void { 
     this.valueObs.next(value); 
    } 

    public getValue():Observable<string> { 
     return this.valueObs; 
    } 
} 

最初のコンポーネント

@Component({ 
    selector: 'component-one', 
    template: `<button (click)="buttonClicked()">clicke me</button>` 
}) 
export class ComponentOne { 
    constructor(private service: Service){} 

    public buttonClicked():void { 
     this.service.setValue("someValue"); 
    } 
} 

第二成分

@Component({ 
    selector: 'component-two', 
    template: `{{value | async}}` 
}) 
export class ComponentTwo { 
    public value: Observable<string>; 
    constructor(private service: Service){} 

    ngOnInit() { 
     this.value = this.service.getValue(); 
    } 
}