Question

在Angular 2应用程序中，假设我有一个＆＃39; SaveComponent＆＃39;单击其保存按钮的位置调用返回true或false的函数isDirty()（如果已修改父组件的内容，则为true）。请注意＆＃39; SaveComponent＆＃39;是它有风格和其他小部件＆＃39;与之相关的许多组件共享。

目前在每个父组件中定义了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

The problem is that you lose the context of your method when referencing it, i.e. the "this" keyword.

I would use something like that:

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

With the arrow function, you will be able to use the lexical this. The latter corresponds to the component instance itself.

And provide it to the sub component this way:

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

Answer 2

我意识到这已经很老了，但是我只是碰到了这个问题，所以希望这可以帮助某个人前进。我也尝试编辑第一个答案，但被拒绝了，而且我没有足够的声誉来评论第一个答案。

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

调用this.isDirty()而不是this.isDirty来运行该功能。

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

2 个答案: