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

在Angular里处理跨组件的数据更新，我推荐两种常用方案，你可以根据组件的层级关系来选择：

方案一：使用共享服务（推荐用于无直接父子关系的组件） #

这种方式通过一个共享的服务，用RxJS的Subject实现组件间的消息传递，非常适合兄弟组件或者没有直接嵌套关系的组件。

1. 创建共享服务 #

首先新建一个FoodService，用来传递分类ID：

// food.service.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class FoodService {
  // 创建Subject作为消息源
  private categoryIdSubject = new Subject<number>();
  // 暴露Observable供其他组件订阅
  categoryId$ = this.categoryIdSubject.asObservable();

  // 发送分类ID的方法
  publishCategoryId(catId: number) {
    this.categoryIdSubject.next(catId);
  }
}

2. 在CategoryComponent中发送数据 #

注入服务后，在loadFoods方法里调用服务的发送方法：

// category.component.ts
import { Component } from '@angular/core';
import { FoodService } from './food.service';

@Component({
  selector: 'app-category',
  templateUrl: './category.component.html'
})
export class CategoryComponent {
  categoryItems = [/* 你的分类数据集 */];

  constructor(private foodService: FoodService) {}

  loadFoods(catId: number) {
    // 将选中的分类ID发送到共享服务
    this.foodService.publishCategoryId(catId);
  }
}

3. 在FoodComponent中接收并更新数据 #

注入服务后，订阅分类ID的变化，然后加载对应食物数据：

// food.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { FoodService } from './food.service';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'app-food',
  templateUrl: './food.component.html'
})
export class FoodComponent implements OnInit, OnDestroy {
  foodItems = [];
  private categorySub: Subscription;

  constructor(private foodService: FoodService) {}

  ngOnInit() {
    // 订阅分类ID的变化
    this.categorySub = this.foodService.categoryId$.subscribe(catId => {
      // 根据分类ID加载食物数据
      this.fetchFoodsByCategory(catId);
    });
  }

  fetchFoodsByCategory(catId: number) {
    // 这里可以替换成你的HTTP请求，比如：
    // this.http.get(`/api/foods?category=${catId}`).subscribe(res => this.foodItems = res);
    // 下面是模拟数据示例
    this.foodItems = /* 根据catId筛选后的食物数据 */;
  }

  ngOnDestroy() {
    // 销毁订阅，避免内存泄漏
    this.categorySub.unsubscribe();
  }
}

方案二：通过父组件作为中介（用于父子层级组件） #

如果你的CategoryComponent和FoodComponent是同一个父组件的子组件，可以用@Input和@Output来实现数据传递。

1. 修改CategoryComponent，添加输出事件 #

// category.component.ts
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-category',
  templateUrl: './category.component.html'
})
export class CategoryComponent {
  categoryItems = [/* 你的分类数据集 */];
  // 定义输出事件，传递分类ID
  @Output() categorySelected = new EventEmitter<number>();

  loadFoods(catId: number) {
    // 触发事件，把分类ID传给父组件
    this.categorySelected.emit(catId);
  }
}

2. 父组件接收事件并传递给FoodComponent #

父组件的HTML：

<!-- parent.component.html -->
<app-category (categorySelected)="handleCategorySelect($event)"></app-category>
<app-food [selectedCatId]="currentCategoryId"></app-food>

父组件的TS代码：

// parent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  currentCategoryId: number;

  handleCategorySelect(catId: number) {
    // 更新当前选中的分类ID
    this.currentCategoryId = catId;
  }
}

3. FoodComponent通过输入属性接收数据 #

// food.component.ts
import { Component, Input, OnChanges } from '@angular/core';

@Component({
  selector: 'app-food',
  templateUrl: './food.component.html'
})
export class FoodComponent implements OnChanges {
  foodItems = [];
  // 定义输入属性，接收父组件传递的分类ID
  @Input() selectedCatId: number;

  // 当输入属性变化时触发
  ngOnChanges() {
    if (this.selectedCatId) {
      this.fetchFoodsByCategory(this.selectedCatId);
    }
  }

  fetchFoodsByCategory(catId: number) {
    // 同样，这里可以是HTTP请求或本地数据筛选
    this.foodItems = /* 根据catId获取的食物数据 */;
  }
}

注意事项 #

• 使用共享服务时，确保服务的注入层级正确（比如在根模块提供，或者在共同的父组件提供），避免创建多个服务实例。
• 订阅RxJS流后，一定要在组件销毁时取消订阅，防止内存泄漏。
• 如果是HTTP请求，记得处理错误和取消请求（比如用takeUntil操作符）。

内容的提问来源于stack exchange，提问作者Snake Eyes