Angular2 passing a function to a directive via attribute

问题

I'm trying to bind a function in a parent component into a property on a child component.

This is what I have

@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
    }
}

This is how i'm using it

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

but it doesn't seem to work

回答1:

Your code only binds the string nameOfFuncFromAnotherComponent to the callback attribute (and property if it exists). Angular doesn't interpret the value at all.

To make Angular manage the binding use

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

With this syntax Angular also evaluates the value

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

but converts the result to a string (calls .toString()) before the assignment.

Thanks to @MarkRajcok for clarification :)

回答2:

i think using eventEmitter in the case of function is much more better becouse of the passing the function by reference will make some problems with the this

so my suggestion is to do the following

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

回答3:

There is really no need for pushing callback into @Input property. You can use #local_variable wich provides a reference to the child component. That way you will have access to all its properties and methods from the parent template. See ng2 documentation on component interaction.

回答4:

For me this solution worked:

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

来源：https://stackoverflow.com/questions/35366048/angular2-passing-a-function-to-a-directive-via-attribute

标签

typescript

angular

angular2-directives