带有参数的Angular 5 Component输入函数

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')"。