Angular 2模板：定義一個回調

我將創建一個簡化的例子來說明我的現實世界問題，所以假設我有一個列出對象的組件。Angular 2模板：定義一個回調

它需要輸入@Input() objects: Object[]和@Input label: Function，使得它可以爲每一個都具有label爲他們每個人的返回值的objects的輸出標記。

label應該是一個函數，根據對象創建一個字符串，以便子組件在呈現每個對象的方式上儘可能靈活。像id + title或"This is item " + number或"item " + title + " costs " + cost + "$" ...

一個practial label可能是e => e.id + ': ' + e.title其中e（爲label的說法是objects各自的項目）

現在，我想在另一個組件的使用成分B模板A，而不將A的組件類加入label函數，因爲這會使A的組件類大量混亂。我想在模板中定義label函數，例如與

<my-selector [objects]="myObjects" [label]="e => e.id + ': ' + e.title"

但無論我嘗試哪種符號，角似乎與像Bindings cannot contain assignments之類的錯誤，以阻止這個...

問：這是可能實現，如果沒有，什麼是解決這個問題的最佳途徑？

來源

2017-01-16 Conic

通過它只是創造一個功能和傳遞功能，而不是'E => e.id +「：」 + E .title' – Maxime

你爲什麼要將函數作爲輸入傳遞給子組件？如上所示，'label'是功能。鼓勵將價值作爲投入。如果您想要訪問子組件中的某個函數，則始終可以使用該子組件的實例執行此操作。 – koech

我想這樣做，因爲子組件在呈現對象時應該靈活。我相應地更新了這個問題。 – Conic

有沒有辦法來定義明確的模板的功能，但你可以在組件類定義它：

constructLabel(e): string { 
    console.log('Constructing label...'); 
    return e.id + ': ' + e.title; 
};

綁定指針：

[constructLabel]="constructLabel"

，並調用它的子組件：

export class ChildComponent implements AfterViewInit { 

    @Input() constructLabel: Function; 

    constructor() { } 

    ngAfterViewInit() { 
     let e = {}; 
     this.constructLabel(e); // => Constructing label... 
    } 
}

來源

2017-01-16 12:09:10

我添加了一個解釋，爲什麼它必須是一個函數，當然你的第二個解決方案是工作的，但我說我不想讓組件額外的功能混亂，而是直接在模板中定義它。所以我的問題是指如果這可能沒有添加功能的組件類。 – Conic

沒有辦法從模板中定義一個函數，也看不出有效的原因。但是，如果您需要在子組件中執行該功能，則可以在父組件中定義它並在模板中綁定一個指針。我會更新我的答案來證明它。 –

那麼對於我的問題'這是否可能實現，如果不可以，解決這個問題的最佳方法是什麼？'會是'不是，最好的解決方案是將函數寫入組件'。謝謝，如果您相應更新，我會接受您的回答。 – Conic

據我所見，目前無法定義函數在Angular 2模板中。所以，你必須在組件

constructLabel(e): string { 
    return e.id + ': ' + e.title; 
};

定義功能，並通過

[label]="constructLabel"

來源

2017-01-16 12:49:58 Conic

Angular 2模板：定義一個回調

回答

相關問題