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",
      }
    ]

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

我想我需要用两种绑定方式（框[[click）]中的香蕉）单击，因为我需要从action.function中读取函数，但是在ts中执行一个，但是出现错误：

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

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>

...以我谦逊的观点，如果您不需要构建如此复杂的“动作”-对象/“动作”-数组，而只需编写看起来像这样的3个按钮，则它将更加干净：< / p>

<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>

Answer 2

我想我了解您要完成的工作。我前一段时间输入这个问题的目的是创建一个多功能的动作组件。这个组件将使用一个加载了ActionButton的配置对象，这与您上面在其他配置类型参数中拥有的“ actions”对象不同。

请参阅StackBlitz

ng-click中的两种方式绑定

2 个答案: