Angular：将@Input回调转为input signal后如何调用传入的函数？

你遇到的问题核心是函数上下文绑定，而非Input Signal的调用语法问题——this.callback()()本身的写法是正确的，问题出在父组件传递函数时没有绑定this上下文，导致子组件调用时函数内部的this指向异常（如果parentFunc依赖父组件实例的话）。

解决方案 #

1. 父组件传递时绑定上下文

最稳妥的方式是在父组件中确保函数绑定到正确的this，有两种常用方式：

方式一：使用bind()绑定

@Component({})
class ParentComponent {
  parentFunc() {
    // 若函数内用到this（比如父组件属性），绑定后上下文才正确
    console.log(this);
  }
}

模板中传递绑定后的函数：

<app-child-component [callback]="parentFunc.bind(this)" />

方式二：使用箭头函数（更简洁）

箭头函数会自动捕获当前上下文，无需手动绑定：

@Component({})
class ParentComponent {
  parentFunc() {
    console.log(this);
  }
}

模板中用箭头函数包裹：

<app-child-component [callback]="() => this.parentFunc()" />

2. 子组件中正确调用回调

确认父组件传递的函数上下文没问题后，子组件中直接调用即可，也可以先赋值再调用提升可读性：

@Component({})
class ChildComponent {
  callback = input.required<() => void>();

  ngOnInit() {
    // 直接调用
    this.callback()();

    // 先赋值再调用，可读性更强
    const invokeCallback = this.callback();
    invokeCallback();
  }
}

原代码不生效的原因 #

当你在父组件模板中直接写[callback]="parentFunc"时，传递的是函数本身，但该函数的this并未绑定到父组件实例。严格模式下，子组件调用时this会指向undefined，若parentFunc内部依赖父组件的属性或方法，就会抛出错误，看起来像是“调用失败”。

你完全不需要退回到旧的@Input装饰器，Input Signal完全支持传递和调用回调函数，只要处理好上下文绑定即可。

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