Question

我很难用文字向自己解释这个问题，所以写下来让你理解它会更难，但我希望你能得到这个想法并找到解决方案。

我目前正在开发一个Angular（5）项目，我想创建一个通用组件，它将我的按钮模型数组作为输入。

我的问题是，我似乎无法弄清楚如何将函数名称添加到该按钮模型以用于（点击）事件。像

export interface ButtonModel{
     value: string;
     functionName: doSomethingOnClick(); <---- problem area
}

//Component holding the buttons
component{
    @Input() buttons: ButtonModel;

    doSomethingOnClick(){
      console.log('this works');
    }
}

然后我可以将其用作

<button value="{{btnModel.value}}" (click)="btnModel.functionName"></button>

我真的不知道这是否可能。根据我自己的知识，我能得到的最接近的是硬编码所有按钮然后使用* ngIf来显示所需的按钮，但是能够动态添加它们会更加智能。

提前谢谢

Answer 1

您可以将ButtonModel更改为此

export interface ButtonModel{
     value: string;
     click(): void; 
}

你可以像

一样分配它

x = [{
  value:'OK',
  click: () => {console.log('OK')}
},
{
  value:'Cancel',
  click: () => {console.log('Cancel')}
}]

并在您的组件中

<button value="{{btnModel.value}}" (click)="onClick(btnModel)"></button>

component{
    @Input() buttons: Array<ButtonModel>;

    onClick(model: ButtonModel ){
      model.click();
    }
}

Angular（5） - （单击）模型中的事件函数名称

1 个答案: