通过Angular组件将函数作为参数传递给（单击）事件

Posted 2023-02-23

【中文标题】通过Angular组件将函数作为参数传递给（单击）事件

【英文标题】：Pass a function as a parameter to (click) event through Angular component

【发布时间】：2019-01-03 21:32:45

【问题描述】：

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

html：

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

TS 家长：

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

TS 孩子：

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;

【问题讨论】：

你应该改用Output

当我认为您需要使用属性绑定时，您正在使用事件绑定。如果要将函数 in 传递给嵌套的子组件，则需要 Input 装饰器，但需要使用属性绑定对其进行绑定。另外，我认为您想传入函数，而不是执行函数，因此您可能需要关闭()。

【参考方案1】：

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

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

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

父组件

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

父模板

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

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

子组件

  @Input() testFunction: any;

子模板

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

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

【讨论】：

你知道为什么它现在不起作用了吗？我刚刚编辑了OP。尝试 C&P 来自 stackblitz 的代码，它可以正常工作，但我的没有

这些需要使用事件绑定：(click)="cancelFunction()"您的代码中缺少括号。

感谢您的帮助，这是我的代码的主要问题，因为我在没有绑定单击的情况下进行了所有测试。我也尝试了@user184994 示例，但它没有工作

谢谢！完美运行，正是我想要的。

【参考方案2】：

您可以将@Output 装饰器与EventEmitter 类结合使用来实现此目的

子组件（打字稿和标记）

        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 
          @Output() clicked: EventEmitter<any> = new EventEmitter();
          cancelFunction()
            this.clicked.emit("CANCELLED"); // Pass any payload as argument
          
          acceptFunction
            this.clicked.emit("ACCEPTED"); // Pass any payload as argument
          
        

父标记

<btn-submit (clicked)="onAddClicked($event)" [acceptFunction]='test'></btn-submit>

父 Typescript 函数

onAddClicked(event: any)
console.log(event); // Your payload is in 'event'

【参考方案3】：

将其从 @Input 更改为 @Output

@Output() acceptFunction = new EventEmitter<any>();

然后，当你想要调用它时，在你的组件中执行：

this.acceptFunction.emit();

HTML 可以保持原样。

    <btn-submit (cancelFunction)="myCancelFunction()"
            (sendFunction)="mySendFunction()></btn-submit>

每次调用.emit()，它都会触发一个事件。父母会听到这个事件，并调用你绑定的函数（例如mySendFunction）

【讨论】：

这种情况下使用Output有什么好处？

@prevox 这已经在 Deborah 的回答中解释过了。在这里引用-“但是使用其他答案中显示的更常见的@Output 和 EventEmitter 方法可能是更好的选择。@Output 技术不允许您传入函数，但确实允许您的父组件从您可以通过调用父组件中的函数来响应的子组件。”