Question

我有两个组件：FoodComponent和CategoryComponent

在类别组件html中：

<div *ngFor="let category of categoryItems">
    <mat-checkbox data-id="{{category.id}}" (change)="loadFoods(category.id)">{{category.title}} ({{category.foodCount}})</mat-checkbox>
</div>

和

loadFoods(catId) {
   // update data to foodcomponent, I don't know how
}

在食物成分中：

<mat-card class="food-card" *ngFor="let food of foodItems">
  <mat-card-header>
    <!-- <div mat-card-avatar class="food-header-image"></div> -->
    <mat-card-title>{{food.title}}</mat-card-title>
    <mat-card-subtitle>&nbsp;</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
  <mat-card-content>
    <div>
      {{food.description}}
    </div>
  </mat-card-content>
  <mat-card-actions>
    <button mat-raised-button color="primary" class="left">Add to cart</button>
    <button mat-raised-button color="warn" class="left">Add to favourite</button>

    <button mat-button class="right">{{food.price}} USD</button>
    <div class="clear"></div>
  </mat-card-actions>
</mat-card>

foodItems初始化FoodComponent。

两者都有单独的服务：FoodService和CategoryService，它们向api发出http请求。

如何从CategoryComponent（存在更改事件的位置）向FoodComponent发送数据并更新该数组foodItems？

Answer 1

因此，如果这两个组件具有父子关系，则可以使用@Input（）@ Output（）属性。因此，如果子组件发生更改，并且您希望从@Output（）通知父级.emit(newValue)。

如果他们没有父子关系，你可以简单地创建一个单件服务，并通过推送新状态并订阅从另一个组件获取最新更改来与observables / subject共享状态。以下是一些可以帮助https://angular.io/guide/component-interaction

的代码

如果您需要更多帮助，请告诉我们，但最好分享更多这些服务的代码。

实例：https://stackblitz.com/edit/angular-ga7qfp 我在那里导入Http客户端时遇到了一些问题，但即使从http获取数据，共享状态应该非常相似。

单击Angular 5中其他组件的复选框时更新组件数据

1 个答案: