Angular 2：如何将函数传递给子组件

Question

在一个Angular 2应用程序中，假设我有一个'SaveComponent'，其中单击其保存按钮调用一个返回true或false的函数isDirty() （如果父组件的内容已被修改，则为true）。 请注意，“SaveComponent”的原因是它具有与之关联的样式和其他“窗口小部件”，这些样式在许多组件之间共享。

目前在每个父组件中定义了一个isDirty函数，并且该函数在父模板中如下传递给SaveComponent ：

<save-component [isDirty]="isDirty"> </save-component>

如果你愿意看， SaveComponent的简化版本被定义为这样......

import {Component, Input} from 'angular2/core';

@Component({
  selector: 'save-component',
  templateUrl: 'who-cares-to-know.component.html'
})

export class SaveComponent {
  @Input() isDirty;
}

它最初只起作用。 似乎isDirty函数只返回false （或只调用一次？），即使内容被修改。 请注意，从父组件调用该函数时，该函数可以正常工作。

怎么了？ 是否可以通过@Input或其他方式将函数从父组件传递给子组件？ 谢谢！

Answer 1

问题是您在引用方法时丢失了方法的上下文，即“this”关键字。

我会用这样的东西：

getIsDirty() {
  return () => {
    return this.isDirty();
  }
}

使用箭头功能，您将能够使用词法。 后者对应于组件实例本身。

并以这种方式将其提供给子组件：

<save-component [isDirty]="getIsDirty()"> </save-component>

Answer 2

我意识到这已经过时了，但我刚刚遇到了这个问题，所以希望这可以帮助一些人前进。 我也尝试编辑第一个答案但是被拒绝了，我没有足够的声誉来评论第一个答案。

第一个答案是正确的，但它并不完整。 为了在子组件中调用父函数，您需要将@Input() isDirty视为函数而不是属性。

调用this.isDirty()而不是this.isDirty以运行该函数。