将按钮值传递给组件中的功能

Question

我有一个按钮，可从组件动态获取其值和文本。单击按钮后，我想将值传递给组件中的函数。

<button class="btn btn-sm btn-primary" 
value="{{ actionButton.value }}"
(click)="doSomething()">{{ actionButton.text }}</button>

doSomething() {

//Get value from the button clicked.
//Do something with it.

}

有没有办法传递事件？

Answer 1

您可以将参数传递给方法。

<button class="btn btn-sm btn-primary" 
    value="{{ actionButton.value }}"
    (click)="doSomething(actionButton)">{{ actionButton.text }}</button>

doSomething(actionButton: {value: any}) {
  console.log(actionButton.value);
}

Answer 2

所以...

currentComponent.component.ts具有public actionButton: {}吗？

currentComponent.component.html具有<button (click)="doSomething()"></button>吗？

如果currentComponent是您的组件且不在* ngFor循环中，那么为什么要将actionButton.value传递给DOM以将其作为参数返回给组件？

您只需完成doSomething(): void { // do something with actionButton.value }

如果通过actionButton给您@Input()，则逻辑保持不变。