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

Question

在Angular 2应用程序中,假设我有一个'SaveComponent',其中单击其保存按钮会调用isDirty()返回true或false 的函数(如果父组件的内容已被修改,则为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>