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

【问题标题】：Angular 2 : How to pass function into child componentAngular 2：如何将函数传递给子组件
【发布时间】：2016-08-28 23:45:39
【问题描述】：

在 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 或其他方式将功能从父组件传递给子组件？谢谢！

【问题讨论】：

您是在文本框上使用[(ngModel)]="isDirty" 还是在更新您的价值？（在父组件上）

标签： angular

【解决方案1】：

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

我会使用类似的东西：

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

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

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

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

【讨论】：

这似乎返回了子组件中的函数本身，对于@Input() isDirty 有什么需要做的吗？
在子组件中运行函数将@Input isDirty视为函数而不是属性。打电话给this.isDirty() 而不仅仅是this.isDirty

【解决方案2】：

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

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

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

【讨论】：