Angular 5 带参数的组件输入函数

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() 在没有任何交互的情况下立即被调用。

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

编辑：

我在这里试图解决的实际问题是能够在以后运行任何传入的函数。这是一个确认组件，它将询问用户 "are you sure you want to continue?" 然后如果他们按下 "Yes I'm sure" 按钮，传入的函数将运行.

Answer 1

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

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

然后像这样使用它：

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

Answer 2

这是 @toskv 寻找的 @Output 语法的示例，Angular 将回调函数作为 @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 3

模板：

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

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

如果有人有同样的问题。这是它的解决方案。

创建接口。

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

在您的 angular 组件上，创建一个 @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 带参数的组件输入函数

Angular 5 Component input function that takes parameters

typescript

angular

angular5

编辑：