Angular中@Output EventEmitter无法正常工作问题咨询

嘿，我来帮你把这个Angular子组件的事件传递逻辑梳理清楚，并且规范展示完整的代码示例~

在Angular中，子组件想要向父组件传递数据，最常用的方式就是通过@Output()装饰器和EventEmitter类来实现。下面是你提供的子组件代码的完整版本，以及对应的父组件接收逻辑：

子组件（RateSortComponent）完整实现 #

TypeScript代码 #

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

@Component({ 
  selector: 'app-rate-sort', 
  templateUrl: './rate-sort.component.html' 
})
export class RateSortComponent implements OnInit {
  // 定义输出事件，指定传递的数据类型为string
  @Output() sort = new EventEmitter<string>();

  constructor() { }

  ngOnInit() { }

  // 触发事件的方法，接收排序类型参数并发射给父组件
  sortBy(sortType: string) { 
    this.sort.emit(sortType); 
  }
}

模板文件（rate-sort.component.html） #

因为你提到要通过模板中的按钮触发事件，这里补充完整的按钮触发代码：

<!-- 点击按钮时调用sortBy方法，传递不同的排序类型字符串 -->
<button class="sort-btn" (click)="sortBy('asc')">按评分升序</button>
<button class="sort-btn" (click)="sortBy('desc')">按评分降序</button>
<button class="sort-btn" (click)="sortBy('latest')">按最新发布排序</button>

父组件接收子组件事件的实现 #

父组件模板 #

在父组件的模板中，我们需要引用子组件，并绑定子组件暴露的sort事件，通过$event来接收子组件传递过来的数据：

<!-- 引入子组件并绑定sort事件 -->
<app-rate-sort (sort)="handleSort($event)"></app-rate-sort>

<!-- 展示当前选中的排序方式 -->
<div class="current-sort">
  当前排序规则：<strong>{{ currentSortType || '未选择' }}</strong>
</div>

父组件TypeScript代码 #

在父组件的TS文件中，实现处理排序事件的方法：

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

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

  // 处理子组件传递过来的排序类型
  handleSort(sortType: string) {
    this.currentSortType = sortType;
    // 这里可以添加具体的业务逻辑，比如调用API获取对应排序的数据
    console.log(`开始执行${sortType}排序逻辑`);
  }
}

关键知识点说明 #

• @Output()：用于标记组件向外暴露的事件，父组件可以通过绑定这个事件来接收子组件传递的数据。
• EventEmitter：Angular提供的事件发射器类，专门用于组件间的事件传递，需要指定泛型来定义传递的数据类型（这里是string）。
• $event：在父组件绑定事件时，$event代表子组件通过emit()传递过来的数据，类型要和子组件定义的一致。

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