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

时间:2018-07-26 19:42:04

标签: angular input components selector

我正在尝试创建一个带有cancel和send按钮的组件,以避免每种形式的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;
}

3 个答案:

答案 0 :(得分:3)

如果您实际上想将功能从父组件传递到子组件,则可以按照下面的代码所示进行操作。

但是使用其他答案中所示的更常见的@OutputEventEmitter方法可能是更好的选择。 @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

答案 1 :(得分: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>

父打字稿功能

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

答案 2 :(得分:0)

将其从@Input更改为@Output

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

然后,在要调用的组件内部执行以下操作:

this.acceptFunction.emit();

HTML可以保持不变。

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

每次调用.emit()时,它将触发一个事件。家长将听到此事件,并调用您绑定的功能(例如mySendFunction