如何在同级组件之间进行通信

Question

我是Angular的新手，如果我做错了什么或遵循了错误的方法，请告诉我。

我有一个foodDetails组件，单击buynow按钮，食物就会被推入数组中。

ShopDataService是组件和headerComponent之间foodDetails常用服务，在标题组件中，我希望每次用户单击组件中的 buynow 按钮时foodDetails继续显示产品数组的长度。那么如何在组件中单击buynow时通知标题组件foodDetails。

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

食品详情组件：

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

这是我的 html 容器的结构：

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

标头组件是 prac-header，而 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();
}
}