首页 文章

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

提问于
浏览 次
6

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

目前在每个父组件中定义了一个 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 或其他方式将函数从父组件传递给子组件？谢谢！

angular

2 回答

  • 8

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

    我会用这样的东西：

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

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

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

    <save-component [isDirty]="getIsDirty()"> </save-component>
    回复于
  • 1

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

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

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

    回复于

相关问题