typescript Angular2 通过属性将函数传递给指令
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35366048/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular2 passing a function to a directive via attribute
提问by Steven Yates
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
但它似乎不起作用
回答by Günter Z?chbauer
Your code only binds the string nameOfFuncFromAnotherComponentto the callbackattribute (and property if it exists). Angular doesn't interpret the value at all.
您的代码仅将字符串绑定nameOfFuncFromAnotherComponent到callback属性（如果存在，则绑定到属性）。Angular 根本不解释这个值。
To make Angular manage the binding use
使 Angular 管理绑定使用
<awesome [callback]="nameOfFuncFromAnotherComponent"></awesome>
With this syntax Angular also evaluates the value
使用这种语法，Angular 也会计算值
<awesome callback="{{nameOfFuncFromAnotherComponent}}"></awesome>
but converts the result to a string (calls .toString()) before the assignment.
但.toString()在赋值之前将结果转换为字符串（调用）。
Thanks to @MarkRajcok for clarification :)
感谢@MarkRajcok 的澄清:)
回答by Mostafa Ahmed
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
我认为在函数的情况下使用 eventEmitter 会更好，因为通过引用传递函数会使this出现一些问题
so my suggestion is to do the following
所以我的建议是做以下事情
cm1.component.html
cm1.component.html
<cm2-component (childFunc)="myFunc()"></cm2-component>
cm2.component.ts
cm2.component.ts
import { Output, EventEmitter } from '@angular/core';
export class Cm2 {
@Output('childFunc') childFunc: EventEmitter<any> = new EventEmitter();
constructor() { }
invokeMyFunc(){
this.childFunc.emit()
}
}
回答by Dzenad Dedic
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.
真的没有必要将回调推送到 @Input 属性中。您可以使用 #local_variable 提供对子组件的引用。这样你就可以从父模板访问它的所有属性和方法。 请参阅有关组件交互的 ng2 文档。
回答by mirik
For me this solution worked:
对我来说，这个解决方案有效：
<cm2-component [childFunc]="myFunc.bind(this)"></cm2-component>
<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()
}
}
