Angular 2 : How to pass function into child component

Question

在 Angular 2 应用程序中，假设我有一个“SaveComponent”，点击它的保存按钮调用一个函数 isDirty() 返回 true 或 false(如果父组件的内容已经修改的)。请注意“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();
  }
}

通过箭头函数，您将能够使用词法 this。后者对应于组件实例本身。

并以这种方式提供给子组件:

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