Angular12 -将函数传递给组件和处理结果

Question

我想为按钮创建一个通用组件，它执行方法，然后在子组件中处理结果。据我所知，@Output是单向绑定，因此不能处理传递函数的结果，因此需要使用@Input。

这就是我想要达到的目标：

<my-button (action) = "exampleAction" [showConfirmation]="true">Reload</my-button>

但是使用@Input，我需要使用.bind( this )将函数传递给组件，这不是一种优雅的方法。看起来是这样：

<my-button (action) = "exampleAction.bind(this)" [showConfirmation]="true">Reload</my-button>

有没有任何方法(可能是使用可观察的)来创建简单的、好的buton组件，它需要一个方法、块本身、处理方法和处理其结果？

诚挚的问候

Answer 1

您可以将输出和输入结合起来，以获得双向绑定。看看这个stackblitz

<hello (action)="increment()" [resultAvailable]="resultAvailable"></hello>