angular - 通过 Angular 组件将函数作为参数传递给(单击)事件

Question

我正在尝试创建一个带有取消和发送按钮的组件，以避免在每个表单上使用 c&p，但我找不到将函数作为参数传递给组件选择器的方法

HTML:

<btn-submit [cancelFunction]='test' [acceptFunction]='test'></btn-submit>

TS 父级:

test = () => console.log("this is a test");

TS child :

import { Component, Input } from '@angular/core';

@Component({
  selector: 'btn-submit',
  styleUrls: ['./btn.component.scss'],
  template: `
          <button class="btn" click="cancelFunction()">
              <fa name="times"></fa>
          </button>
          <button class="btn" click="acceptFunction()">
              <fa name="check"></fa>
          </button>
  `
})

export class BtnSubmitComponent {
  @Input() cancelFunction: any;
  @Input() acceptFunction: any;
}

Answer 1

如果您想真正将一个函数从父组件传递给子组件，您可以按照下面的代码所示进行操作。

但如其他答案所示，使用更常见的 @Output 和 EventEmitter 方法可能是更好的选择。 @Output 技术不允许您传入函数，但允许您的父组件从子组件接收事件，您可以通过调用父组件中的函数来响应这些事件。

这是允许您将函数从父组件传递到子组件的代码。

父组件

test = () => console.log("this is a test");

父模板

<pm-star [rating]='product.starRating'
    [testFunction]='test'
    (ratingClicked)='onRatingClicked($event)'>
</pm-star>

注意方括号(属性绑定(bind))，它不会调用函数，而是绑定(bind)到包含该函数的组件的属性。

子组件

  @Input() testFunction: any;

子模板

<div class="crop"
     [style.width.px]="starWidth"
     [title]="rating"
     (click)="testFunction()">

我有一个 stackblitz，这里有一个简单的工作示例:https://stackblitz.com/edit/angular-jwguwk?file=src%2Fapp%2Fapp.component.ts