Question

在Angular 2+组件中，如何传入带参数的回调函数？我最初的假设是像

<app-example [onComplete]="doThing('someParam')"></app-example>

有时我不需要任何参数，例如：

<app-example [onComplete]="doSomeThingElse()"></app-example>

然后在我的组件中

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
})
export class ExampleComponent {
  @Input() public onComplete: () => void;

  //run `this.onComplete()` somewhere as needed
}

但是，最终发生的事情是doThing('someParam')或doSomeThingElse()会在没有任何互动的情况下立即被调用。

我应该如何将回调函数传递给稍后要调用的组件？

编辑：

我想在这里解决的实际问题是能够在以后运行任何传入的函数。这是一个确认组件，它会询问用户“你确定要继续吗？”然后如果他们按下“是的我确定”按钮，传入的功能将会运行。

Answer 1

以下是@toskv正在寻找的@Output语法示例，Angular pass callback function to child component as @Input

所以对你的例子来说，

<app-example 
  (onComplete)="doThing()" 
  [completedParam]="'someParam'"></app-example>

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
})
export class ExampleComponent {
  @Output() public onComplete: EventEmitter<any> = new EventEmitter();
  @Input() completedParam;

  runOnComplete(): void {
    this.onComplete.emit(this.completedParam);
  }
}

感觉不如[onComplete]="doThing.bind(this, 'someParam')"。

Answer 2

模板：

<app-example [someParams]="someParamsObject"
             (complete)="onComplete($event)" >
</app-example>

组件：

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
})
export class ExampleComponent {
  @Input()
  someParams: YourParamsType;

  @Output()
  complete:EventEmitter<any> = new EventEmitter<any>();

  //run `this.complete(this.someParams)` somewhere as needed and 
  //pack in some params if you need
}

在您的调用父组件中，您需要一个名为onComplete的函数，在这种情况下接收any类型的参数（来自@Output被定义为EventEmitter<any>）。如果需要，您还可以使用您喜欢的任何特定类型的事件参数EventEmitter<YourParticularType>。

Answer 3

您可以在组件中使用私有方法：

private doThingFactory(param) {
  return () => this.doThing(param);
}

然后像这样使用它：

<app-example [onComplete]="doThingFactory('someParam')"></app-example>

Answer 4

仅当您有一个需要调用而不对组件本身采取任何措施的方法时，上述解决方案才有效。但是，就我而言，我需要在app-example组件内部执行一个可观察的方法，并等待响应在该组件内部执行一些操作。

如果有人遇到相同的问题。这是解决方案。

创建接口。

export interface Delegate<T> {
  (...args: any[]): T;
}

在角度组件上，创建一个@Input变量

@Component({
    selector: 'app-example',
    templateUrl: './example.component.html',
})
export class AppExampleComponent {
  @Input() executeWhen: Delegate<Observable<any>>;

  runOnComplete(): void {
    this.executeWhen().subscribe(() => // do some action);
  }
}

采用参数的Angular 5 Component输入函数

编辑：

4 个答案: