Angular订阅与EventEmitter异常：默认分类未正确触发

看起来你遇到的问题核心在于BehaviorSubject初始值处理不当，以及组件初始化时的订阅执行顺序导致分类状态被意外覆盖。咱们一步步拆解解决：

问题根源分析 #

1. BehaviorSubject初始值的矛盾：你定义的filterCategories = new BehaviorSubject("category")，这个初始值"category"并不存在于你的分类列表中。当FilterBarComponent的ngOnInit执行时，订阅这个Subject会立刻收到初始值，触发filterCategories里的逻辑：把所有分类的checked设为false（因为category.name === "category"全不成立），然后updateCategories过滤后就会emit空数组，这就是你看到控制台出现[{}]的原因。
2. 初始化顺序的冲突：你在ngOnInit里先调用initCategories把所有分类设为checked: true，紧接着订阅Subject，立刻被初始值覆盖成全不选；之后如果Home页面跳转时调用next('top')，又会把top设为选中，最后可能又有逻辑恢复全选，导致控制台的多次输出波动。

解决方案 #

1. 调整BehaviorSubject的初始值与订阅逻辑 #

把初始值改成一个代表"全选"的特殊值（比如null），然后在订阅里判断：如果是这个特殊值，就把所有分类设为选中，否则匹配对应的分类。

修改ShopService：

filterCategories = new BehaviorSubject<string | null>(null); // 用null作为全选标识

修改FilterBarComponent的filterCategories方法：

filterCategories() {
  this.categorySub = this.shopService.filterCategories.subscribe(
    (fCategory: string | null) => {
      this.categories.map(category => {
        // 如果是null（全选），则所有分类设为checked；否则匹配指定分类
        category.checked = fCategory === null ? true : category.name === fCategory;
      });
      this.updateCategories();
    });
}

2. 完善组件生命周期，避免内存泄漏 #

记得在组件销毁时取消订阅，防止内存泄漏：

ngOnDestroy() {
  if (this.categorySub) {
    this.categorySub.unsubscribe();
  }
}

3. Home页面跳转传值的逻辑 #

当Home页面点击"查看衬衫"按钮时，调用Service的next方法传入对应分类名即可：

// HomePageComponent里的跳转逻辑
viewShirts() {
  this.shopService.filterCategories.next('top');
  // 执行页面跳转操作
}

验证效果 #

现在初始化时，ngOnInit执行流程：

1. initCategories：所有分类设为checked: true
2. filterCategories订阅Subject，收到初始值null，把所有分类设为checked: true（和初始状态一致，无覆盖）
3. updateCategoriesemit全部分类数组

如果从Home跳转过来，会触发next('top')，此时订阅会把top设为checked: true，其他设为false，emit仅包含top的数组，不会出现之前的空数组波动。

这样就能同时满足：初始进入Shop页面默认渲染全部分类，从Home跳转过来能渲染指定分类的需求啦！

内容的提问来源于stack exchange，提问作者Mitchell Yuen