如何从另一个Angular组件接收输出？@Output失效排查

核心问题分析与修复步骤 #

1. 补充缺失的导入语句 #

你的FiltersComponent中使用了@Output和EventEmitter，但未从@angular/core导入这两个成员，这会导致Angular无法识别装饰器和事件发射器，直接阻断事件传递流程。

修正后的FiltersComponent代码：

import { Component, Output, EventEmitter } from '@angular/core'; // 补充必要导入

@Component({
  selector: 'app-filters',
  templateUrl: 'filters.component.html',
})
export class FiltersComponent {
  @Output() showCategory = new EventEmitter<string>();
  categories = ['shoes', 'sports'];

  onShowCategory(category: string): void {
    this.showCategory.emit(category);
  }
}

2. 优化事件触发逻辑（可选） #

当前模板中按钮嵌套在mat-list-option内部，点击时事件会冒泡到列表选项组件，可能引发不必要的交互干扰。可以通过以下两种方式优化：

方式一：利用列表原生选择事件

直接使用mat-selection-list的selectionChange事件获取选中值，无需额外按钮：

<mat-expansion-panel *ngIf="categories">
  <mat-expansion-panel-header>
    <mat-panel-title>CATEGORIES</mat-panel-title>
  </mat-expansion-panel-header>
  <mat-selection-list [multiple]="false" (selectionChange)="onShowCategory($event.option.value)">
    <mat-list-option *ngFor="let category of categories" [value]="category">
      {{ category }}
    </mat-list-option>
  </mat-selection-list>
</mat-expansion-panel>

方式二：阻止按钮事件冒泡

若需保留按钮，添加stopPropagation避免事件向上传递：

<button (click)="onShowCategory(category); $event.stopPropagation()">
  {{ category }}
</button>

3. 检查控制台错误 #

打开浏览器开发者工具控制台，确认是否存在编译或运行时错误，这是排查Angular事件绑定问题的关键环节。

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