Angular 将回调函数作为 @Input 传递给子组件，类似于 AngularJS 的方式

Question

AngularJS 具有 & 参数，您可以在其中将回调传递给指令（例如 AngularJS 的回调方式。是否可以将回调作为 @Input 传递给 Angular 组件（如下所示）？如果不是什么会是最接近 AngularJS 所做的事情吗？

 @Component({
    selector: 'suggestion-menu',
    providers: [SuggestService],
    template: `
    <div (mousedown)="suggestionWasClicked(suggestion)">
    </div>`,
    changeDetection: ChangeDetectionStrategy.Default
})
export class SuggestionMenuComponent {
    @Input() callback: Function;

    suggestionWasClicked(clickedEntry: SomeModel): void {
        this.callback(clickedEntry, this.query);
    }
}

<suggestion-menu callback="insertSuggestion">
</suggestion-menu>

原文由 Michail Michailidis 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我认为这是一个糟糕的解决方案。如果您想通过 @Input() ， @Output() 将函数传递给组件，那么您正在寻找装饰器。

 export class SuggestionMenuComponent {
    @Output() onSuggest: EventEmitter<any> = new EventEmitter();

    suggestionWasClicked(clickedEntry: SomeModel): void {
        this.onSuggest.emit([clickedEntry, this.query]);
    }
}

<suggestion-menu (onSuggest)="insertSuggestion($event[0],$event[1])">
</suggestion-menu>

原文由 Serginho 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

以下适用于 Angular 13（截至 2022 年 3 月）。

PS-这与其他人的回答或多或少相似。添加这个答案只是为了让人们知道它在 Angular 13 中有效。

将函数定义为 平面箭头，而不是父组件中的常规函数。

 callBackFn= (args: string): void => {
  // callback code here
  // This will work (Flat Arrow)
}
// callbackFn(args: string): void {
//   //This type of definition will not work.
// }

将回调函数作为属性传递给子组件

<app-child [callBack]=”callBackFn”></app-child>

在子组件中接收回调函数作为 Input。定义应与父项中定义的匹配。

 @Input() callBack: (args: string) => void;

然后在子组件中调用这个函数。您也可以将其称为子组件模板。

 this.callBack('Test');

或者

<button (click)="callBack('Test')"></button>

但不确定这种方法是否好用。 我在 ReactJS 中看到了类似的方法，它工作得很好，但仍然不确定它在 Angular 中是如何工作的，以及它会产生什么影响。

对此方法的任何评论将不胜感激。

原文由 Gopal Mishra 发布，翻译遵循 CC BY-SA 4.0 许可协议