typescript - Angular2通过属性将函数传递给指令

Question

我正在尝试将父组件中的函数绑定到子组件的属性中。

这就是我所拥有的

@Component({
  selector: 'awesome',
  templateUrl: 'awesome.html'
})
export class AwesomeComponent {

@Input() callback: Function;

ngOnInit() {

    this.callback();//Error, this.callback is not a function,  but contains a string value on the fuction call
    }
}

这就是我使用它的方式

<awesome callback="nameOfFuncFromAnotherComponent"></awesome>

但它似乎不起作用

Answer 1

您的代码仅将字符串绑定nameOfFuncFromAnotherComponent到callback属性（如果存在，则绑定到属性）。Angular 根本不解释这个值。

让 Angular 管理绑定使用

<awesome [callback]="nameOfFuncFromAnotherComponent"></awesome>

使用这种语法，Angular 也会评估值

<awesome callback="{{nameOfFuncFromAnotherComponent}}"></awesome>

.toString()但在赋值之前将结果转换为字符串（调用）。

感谢@MarkRajcok 的澄清:)

Answer 2

我认为在函数的情况下使用 eventEmitter 会更好，因为通过引用传递函数会使this出现一些问题

所以我的建议是执行以下操作

cm1.component.html

<cm2-component (childFunc)="myFunc()"></cm2-component>

cm2.component.ts

import { Output, EventEmitter } from '@angular/core';
export class Cm2 {
  @Output('childFunc') childFunc: EventEmitter<any> = new EventEmitter();
  constructor() { }
  invokeMyFunc(){
    this.childFunc.emit()
  }
}

Answer 3

确实不需要将回调推送到 @Input 属性。您可以使用 #local_variable 提供对子组件的引用。这样你就可以从父模板访问它的所有属性和方法。 请参阅有关组件交互的 ng2 文档。

Answer 4

对我来说，这个解决方案有效：

<cm2-component [childFunc]="myFunc.bind(this)"></cm2-component>

import { Output, EventEmitter } from '@angular/core';
export class Cm2 {
  @Input('childFunc') childFunc: Function;
  constructor() { }
  invokeMyFunc(){
    this.childFunc()
  }
}