Question

Angular 2版本： rc.1

我有一个父组件和一个子组件。

我在父组件中有一个名为Options的对象，其中包含我想使用@Input传递给子组件的字符串和函数。我传递的字符串工作正常并且符合预期，但我在传递函数时遇到了问题。

以下是与我的问题相关的一些代码。

parent.component.ts

  constructor(private service: Service) {}
  //getResults is a function in service that takes two arguments
  public Options = {
    placeholder: "Enter Value",
    getReq: function(foo, bar) {
      return this.service.getResults(foo, bar)
    },

parent.component.html

<child placeholder="{{Options.placeholder}}" getReq="{{Options.getReq}}"><child>

child.component.ts

  @Input() placeholder: String;
  @Input() getReq: Function;

  searchResults() {
    return this.getReq(foo, bar)
      .subscribe(
        data => this.Results$ = data
      )
  }

我得到的错误是“this.getReq不是函数”

有什么想法吗？

Answer 1

getReq={{Options.getReq}}会将函数作为字符串分配给子属性getReq，因为{{expression}}始终将表达式转换为字符串。这解释了您的错误。
您也可以console.log(typeof this.getReq)看到它是一个字符串。

将父函数传递给子元素会导致父组件与子组件紧密耦合，这通常不建议使用。理想情况下，孩子不应该对父母一无所知。这使（子）组件更可重用。

而不是你当前的方法，

将服务注入子项，并让子项调用服务方法，或
将一个输出属性/ EventEmitter添加到子项并让子项调用myOutputProperty.emit([foo, bar])。然后，父级可以在服务上调用该方法。当服务返回数据时，＆＃34;发送＆＃34;它使用孩子的输入属性返回给孩子。（您不必发送＆＃34;发送＆＃34;它，只需设置绑定到输入属性的父属性，Angular更改检测将自动将新值传播到子输入属性）。

另见相关的SO问题

使用@Input装饰器将函数传递给子组件

1 个答案: