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是becouse通过引用传递功能的更多更好会让一些问题与此

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

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()
  }
}