Angular 2购物车中分类与商品列表子组件通信问题求助

嘿，看来你在Angular 2购物车应用的子组件通信上卡壳了，我来帮你梳理问题、给出靠谱的解决方案！

先分析你试过的两种方案 #

方案1：直接注入子组件的问题 #

你提到把商品列表组件注入到分类组件里，功能能跑但视图不更新。这其实是因为直接操作组件实例属性时，Angular的变更检测可能没被触发，而且这种方式会让两个组件强耦合，后续维护起来特别麻烦，完全不符合Angular的组件设计理念，所以不建议继续用这个路子。

方案2：用RxJS Subject的共享服务（方向正确，但细节可能没做对） #

用共享服务+Subject是Angular官方推荐的跨组件通信方式，你选的方向没问题，大概率是实现细节上出了疏漏，导致没达到预期效果。我给你一步步拆解正确的实现方式：

正确实现：共享服务+RxJS Subject #

1. 创建共享服务 #

先写一个专门的共享服务，用来传递分类选择的事件：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class CategoryService {
  // 创建Subject传递分类ID或信息
  private categorySelectedSource = new Subject<number>();

  // 转换为Observable，外部仅能订阅不能发送事件
  categorySelected$ = this.categorySelectedSource.asObservable();

  // 供分类组件调用的方法，发送选中的分类信息
  selectCategory(categoryId: number) {
    this.categorySelectedSource.next(categoryId);
  }
}

注意：要确保这个服务在根模块或者App父组件的providers里注册，这样两个子组件拿到的是同一个服务实例，不然会出现订阅不到的问题。

2. 分类组件调用服务发送事件 #

在分类组件里，当用户选择分类时，调用共享服务的selectCategory方法：

import { Component } from '@angular/core';
import { CategoryService } from './category.service';

@Component({
  selector: 'app-category',
  template: `
    <div *ngFor="let category of categories" (click)="onCategorySelect(category.id)">
      {{ category.name }}
    </div>
  `
})
export class CategoryComponent {
  categories = [/* 你的分类数据 */];

  constructor(private categoryService: CategoryService) {}

  onCategorySelect(categoryId: number) {
    // 发送选中的分类ID到服务
    this.categoryService.selectCategory(categoryId);
  }
}

3. 商品列表组件订阅事件并更新视图 #

在商品列表组件里，订阅共享服务的categorySelected$ Observable，拿到分类ID后更新商品列表，同时要记得在组件销毁时取消订阅，防止内存泄漏：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { CategoryService } from './category.service';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'app-product-list',
  template: `
    <div *ngFor="let product of filteredProducts">
      {{ product.name }} - {{ product.price }}
    </div>
  `
})
export class ProductListComponent implements OnInit, OnDestroy {
  allProducts = [/* 你的所有商品数据 */];
  filteredProducts = [];
  private categorySubscription: Subscription;

  constructor(private categoryService: CategoryService) {}

  ngOnInit() {
    // 订阅分类选择事件
    this.categorySubscription = this.categoryService.categorySelected$.subscribe(
      (categoryId: number) => {
        // 根据分类ID过滤商品
        this.filteredProducts = this.allProducts.filter(product => product.categoryId === categoryId);
        // 这里不需要手动触发变更检测，subscribe内的操作会自动触发
      }
    );

    // 初始化时默认显示所有商品
    this.filteredProducts = this.allProducts;
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅，避免内存泄漏
    this.categorySubscription.unsubscribe();
  }
}

备选方案：通过App父组件中转 #

如果你的场景比较简单，也可以用@Input和@Output结合父组件实现通信，这种方式更直观，适合有父子组件链的场景：

1. 分类组件用@Output发送分类选择事件到App父组件
2. App父组件接收事件后，把选中的分类ID通过@Input传给商品列表组件
3. 商品列表组件根据输入的分类ID过滤商品

分类组件代码： #

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-category',
  template: `
    <div *ngFor="let category of categories" (click)="onCategorySelect(category.id)">
      {{ category.name }}
    </div>
  `
})
export class CategoryComponent {
  @Output() categorySelected = new EventEmitter<number>();
  categories = [/* 分类数据 */];

  onCategorySelect(categoryId: number) {
    this.categorySelected.emit(categoryId);
  }
}

App父组件代码： #

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <app-category (categorySelected)="onCategorySelected($event)"></app-category>
    <app-product-list [selectedCategoryId]="selectedCategoryId"></app-product-list>
  `
})
export class AppComponent {
  selectedCategoryId: number;

  onCategorySelected(categoryId: number) {
    this.selectedCategoryId = categoryId;
  }
}

商品列表组件代码： #

import { Component, Input, OnChanges } from '@angular/core';

@Component({
  selector: 'app-product-list',
  template: `
    <div *ngFor="let product of filteredProducts">
      {{ product.name }} - {{ product.price }}
    </div>
  `
})
export class ProductListComponent implements OnChanges {
  @Input() selectedCategoryId: number;
  allProducts = [/* 商品数据 */];
  filteredProducts = [];

  ngOnChanges() {
    // 当输入的分类ID变化时，过滤商品
    if (this.selectedCategoryId) {
      this.filteredProducts = this.allProducts.filter(product => product.categoryId === this.selectedCategoryId);
    } else {
      this.filteredProducts = this.allProducts;
    }
  }
}

这两种方式都是Angular里推荐的组件通信方式，其中共享服务+RxJS的方式更适合无直接父子关系的组件通信，而父组件中转的方式适合简单的父子组件链场景。你可以根据自己的需求选一种来实现，应该就能解决视图不更新的问题啦！

内容的提问来源于stack exchange，提问作者Irphan Khan