Обновите данные компонента, когда установите флажок для другого компонента в Angular 5

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, которые отправляют HTTP-запросы к API.

Как отправить данные из CategoryComponent (где существует событие изменения) в FoodComponent и обновить этот массив foodItems?

Answer 1

Так что, если эти два компонента имеют отношения родитель-потомок, вы можете просто использовать свойства @Input () @Output (). Поэтому, если дочерний компонент изменяется, и вы хотите уведомить родителя просто .emit(newValue) из @Output ().

Если у них нет родительско-дочерних отношений, вы можете просто создать одноэлементную службу и поделиться состоянием с наблюдаемыми / субъектами, нажав новое состояние и подписавшись, чтобы получить последние изменения от другого компонента. Вот код, который может помочь https://angular.io/guide/component-interaction

Если вам нужна дополнительная помощь, дайте нам знать, но, возможно, было бы лучше поделиться еще кодом этих служб.

Живой пример: https://stackblitz.com/edit/angular-ga7qfp У меня были некоторые проблемы с импортом Http-клиента, но состояние общего доступа должно быть очень похожим, даже когда вы получаете данные с http.