Angular中如何将父组件方法的返回值传递给子组件？

你当前的代码里，子组件通过EventEmitter向父组件触发事件，但父组件方法的返回值无法直接回传给子组件——因为Angular的事件绑定是单向的（子→父）。下面提供两种可行的实现方式：

方法一：直接传递父组件方法给子组件调用 #

这种方式最直接，子组件可以主动调用父组件的方法并获取返回值。

1. 更新父组件代码 #

无需修改原有方法，只需确保后续能通过输入属性传递该方法：

import { Component, Input } from '@angular/core';
import { TodoComponent } from '../todo/todo.component';

@Component({
  selector: 'app-all',
  templateUrl: './all.component.html',
  styleUrls: ['./all.component.css']
})
export class AllComponent {
  @Input() todo: TodoComponent = {} as TodoComponent;

  addList(val: string) {
    return val;
  }
}

2. 修改父组件模板 #

将父组件的addList方法作为输入属性传给子组件：

<p>
  <app-todo [parentAddList]="addList"></app-todo>
</p>

3. 更新子组件代码 #

通过@Input接收父组件方法，在assignTask中调用并赋值：

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

@Component({
  selector: 'app-todo',
  templateUrl: './todo.component.html',
  styleUrls: ['./todo.component.css']
})
export class TodoComponent {
  @Input() parentAddList!: (val: string) => string;
  task: string = '';

  assignTask() {
    // 这里传入你需要的参数值，示例用'test_task'
    const inputVal = 'test_task';
    this.task = this.parentAddList(inputVal);
  }
}

方法二：通过事件回调传递返回值（适合父组件需先处理逻辑的场景） #

如果父组件的addList需要先执行额外业务逻辑，再把结果传回子组件，可用这种方式：

1. 更新子组件代码 #

添加输入属性接收父组件返回的结果，保留事件发射器：

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

@Component({
  selector: 'app-todo',
  templateUrl: './todo.component.html',
  styleUrls: ['./todo.component.css']
})
export class TodoComponent implements OnChanges {
  @Output() addList = new EventEmitter<string>();
  @Input() taskResult!: string;
  task: string = '';

  assignTask() {
    const inputVal = 'test_task';
    // 触发事件通知父组件处理
    this.addList.emit(inputVal);
  }

  // 监听返回值变化，自动赋值给task
  ngOnChanges(changes: SimpleChanges) {
    if (changes.taskResult) {
      this.task = changes.taskResult.currentValue;
    }
  }
}

2. 修改父组件模板 #

父组件处理事件后，将返回值传给子组件的输入属性：

<p>
  <app-todo (addList)="taskResult = addList($event)" [taskResult]="taskResult"></app-todo>
</p>

3. 更新父组件代码 #

添加属性存储返回值：

import { Component, Input } from '@angular/core';
import { TodoComponent } from '../todo/todo.component';

@Component({
  selector: 'app-all',
  templateUrl: './all.component.html',
  styleUrls: ['./all.component.css']
})
export class AllComponent {
  @Input() todo: TodoComponent = {} as TodoComponent;
  taskResult!: string;

  addList(val: string) {
    // 这里可添加额外业务逻辑
    return val;
  }
}

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