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

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

---

编辑：

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

Answer 1

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

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

然后像这样使用它：

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

Answer 2

这是@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 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 组件内执行一个可观察的方法，并等待响应在该组件内执行一些操作。

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

1. 创建一个接口。

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

2. 在您的角度组件上，创建一个@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);
     }
   }