Angular2通過屬性將函數傳遞給指令

我試圖將父組件中的函數綁定到子組件上的屬性。Angular2通過屬性將函數傳遞給指令

這是我

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

，但它似乎沒有工作

來源

2016-02-12 Steven Yates

你的代碼只綁定字符串nameOfFuncFromAnotherComponent到callback屬性（和屬性，如果它存在）。角度根本不解釋這個值。

進行角向管理結合使用

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

有了這個語法角度也評估值

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

但結果賦值之前轉換爲字符串（調用.toString()）。

感謝@MarkRajcok澄清:)

來源

2016-02-12 15:20:40

由於部件'awesome'有一個'callback'輸入屬性聲明的，'回調= 「nameOfFuncFromAnotherComponent」'將字符串'nameOfFuncFromAnotherComponent'綁定到組件的'callback' _property_ （而不是屬性）。這是常量的某種角度捷徑/特殊語法（我不喜歡）。 –

@StevenYates，'callback =「{{nameOfFuncFromAnotherComponent}}」'不起作用，因爲它基本上調用'nameOfFuncFromAnotherComponent.toString（）'並將其賦值給'callback'屬性。 '{{}}'綁定總是分配一個字符串結果。 –

感謝您的信息 –

實在是沒有必要推到回調財產@input。您可以使用#local_variable提供對子組件的引用。這樣你就可以從父模板訪問所有的屬性和方法。 See ng2 documentation on component interaction.

來源

2016-10-04 04:55:18

如果我沒有弄錯，他正在尋找子組件調用父項方法的相反通信流。所以，父母將其功能傳遞給孩子。 –

我想在功能的情況下使用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() 
    } 
}

來源

2017-12-29 11:59:53

我也喜歡eventEmitter方法。我也有這個問題，但可以通過將一個父函數轉換爲一個委託來解決。 –

Angular2通過屬性將函數傳遞給指令

回答

相關問題