如何通过EventEmitter获取输出值并实现Angular组件间字符串传递？

看起来你在子组件向父组件传递字符串时踩了几个常见的坑，我来一步步帮你修正：

第一步：修正子组件（ComponentOne）的代码 #

首先你的子组件里，emitSomething方法的参数类型有误——点击事件的$event是MouseEvent类型，不是字符串。如果要发射目标字符串，你可以直接在emit方法中传入具体值，调整如下：

子组件HTML #

<div (click)="emitSomething()"></div>

子组件TypeScript #

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

@Component({
  selector: 'component-one',
  templateUrl: './component-one.component.html'
})
export class ComponentOneComponent {
  @Output() someString = new EventEmitter<string>();

  emitSomething() {
    // 传入你要发射的字符串，这里用固定值举例，也可以替换为动态获取的内容
    this.someString.emit('来自子组件的字符串');
  }
}

第二步：修正父组件的接收逻辑 #

你的父组件存在两个关键错误：

1. 父组件不需要定义@Output() someString——@Output是子组件用来向外发射事件的装饰器，父组件作为接收方完全不需要这个配置
2. 绑定事件时不能直接写(someString)="variable"，需要通过方法接收值，或者使用直接赋值的简洁写法

父组件HTML #

<!-- 推荐：通过方法接收并处理值 -->
<component-one (someString)="handleReceivedString($event)"></component-one>

<!-- 简洁写法：直接将发射的值赋值给变量 -->
<!-- <component-one (someString)="variable = $event"></component-one> -->

父组件TypeScript #

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  variable: string; // 存储子组件传来的字符串

  handleReceivedString(value: string) {
    this.variable = value;
    console.log('收到子组件传递的值：', this.variable);
  }
}

第三步：排查模块声明问题 #

报错Can't bind to 'someString' since it isn't a known property of 'component-one'还有一种常见原因：你没有在父组件所在的模块中声明子组件。记得在模块文件中补充以下配置：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ParentComponent } from './parent.component';
import { ComponentOneComponent } from './component-one.component'; // 导入子组件

@NgModule({
  declarations: [
    ParentComponent,
    ComponentOneComponent // 声明子组件
  ],
  imports: [BrowserModule],
  bootstrap: [ParentComponent]
})
export class AppModule { }

完成以上调整后，点击子组件的div元素，父组件的variable就能成功接收到子组件发射的字符串了。

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