angular - ng-click 中的两种方式绑定

Question

我有一个带有名称、图标和功能的操作输入的组件，我需要在单击组件时启动功能。

这是对组件的调用

<div *ngFor="let action of searchedQuestionnaire.actions;">
  <option-button [action]="action"></option-button>
</div>

这里的component.html

<button class="btn btn-main-color margin-left-5" (click)="action.function">
  <i [class]="'fa ' + action.icon + ' fa-lg'"></i> {{ action.name | translate}}
</button>

这里的component.ts

export class OptionButtonComponent implements OnInit {

  @Input() action;

  constructor() {
  }

  editQuestionnaire() {
    console.log('editQuestionnaire')
  }

  createQuestionnaire() {
    console.log('createQuestionnaire')
  }

  deleteQuestionnaire() {
    console.log('deleteQuestionnaire')
  }

  ngOnInit() {
  }

}

这是一系列动作

    "actions": [
      {
        "name": "EDIT",
        "icon": "fa-pencil",
        "function": "editQuestionnaire",
      },
      {
        "name": "DELETE",
        "icon": "fa-trash",
        "function": "deleteQuestionnaire",
      },
      {
        "name": "COPY",
        "icon": "fa-files-o",
        "function": "copyQuestionnaire",
      }
    ]

（我也尝试在完成函数时传递 ()）

我想我需要点击两种绑定方式（盒子里的香蕉[（点击）]因为我需要从action.function中读取函数，但是在ts中执行那个，但是我有一个错误：

无法绑定到“点击”，因为它不是“按钮”的已知属性。

标签： angular

Answer 1

试试这样：

export class OptionButtonComponent implements OnInit {

  @Input() btnName: string;
  @Input() icon: string;
  @Output() onOptionBtnClick() = new EventEmitter<void>();

}

在它的模板中它看起来像这样：

<button class="btn btn-main-color margin-left-5" (click)="action.function">
  <i [class]="'fa ' + action.icon + ' fa-lg'"></i> {{ action.name | translate}}
</button> 

然后你可以在父模板中绑定到onOptionsBtnClick事件

<option-button
  [name]="action.name"
  [icon]=action.icon
  (onOptionsBtnClick)="action.function()"
></option-button>

...在我谦虚的观点中，如果您不需要构建如此复杂的“action”-object/“action”-array 并简单地编写 3 个看起来像这样的按钮，那将会更加简洁：

<option-button
  btnName="EDIT"
  icon="firstIcon"
  (onOptionsBtnClick)="editQuestionnaire()"
></option-button>

<option-button
  btnName="DELETE"
  icon="fa-trash"
  (onOptionsBtnClick)="deleteQuestionnaire()"
></option-button>

<option-button
  btnName="COPY"
  icon="fa-files-o"
  (onOptionsBtnClick)="copyQuestionnaire()"
></option-button>