如何溝通兄弟組件

Question

我是新來的角，請讓我知道如果我做錯了什麼或錯誤的方法。

我有一個foodDetails組件，點擊buynow按鈕，食物被推入一個陣列。

ShopDataService是foodDetails組分和headerComponent之間使用共同的服務，在頭組件我想保持每次顯示產品陣列的長度時在foodDetails部件百腦匯按鈕用戶點擊。那麼如何在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> 

頭組件是PRAC頭，而foodDetail元器件在路由器出口

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