Angular2：我可以使用箭頭函數而不是方法處理@Output返回值嗎

我有一個Angular2應用程序，它有一個父組件（AppComponent）和多個子組件。其中一人（DnDContainer）具有@Output變量是這樣的：Angular2：我可以使用箭頭函數而不是方法處理@Output返回值嗎

@Output() onDataUpdate: EventEmitter<any> = new EventEmitter();

內DnDContainer，有一個在它的單擊事件下面的代碼按鈕：

onSave(e) { 
    this.onDataUpdate.emit(this.data); 
    // this.data is just a simple string array 
}

然後，從AppComponent，有幾個DnDContainer組件（它們的選擇器是'dnd-container'）。我想傾聽他們的'onDataUpdate'輸出並將其分配給不同的數組（targetItemsA，targetItemsB等）。我試圖用一個簡單的語法是這樣的：

<dnd-container (onDataUpdate)="($event) => {targetItemsA = $event}"></dnd-container> 
<dnd-container (onDataUpdate)="($event) => {targetItemsB = $event}"></dnd-container>

但它不工作，所以我不得不只設定陣列到另一個創建的具體方法，如：

<dnd-container [onDataUpdate)="update('A', $event)"></dnd-container> 
<dnd-container [onDataUpdate)="update('B', $event)"></dnd-container>

的方法是這樣的：

update(which, data) { 
    switch (which) { 
    case 'A': 
    this.targetItemsA=data; 
    break; 
    case 'B': 
    this.targetItemsB=data; 
    break; 
    case 'C': 
    this.targetItemsC=data; 
    break; 
    (ETC...) 
    } 
}

有沒有什麼簡單的方法來做到這一點（像一個帶箭頭的功能我在開始時指出）？對不起，如果它太基本了，我對Angular2很陌生。

由於提前，

PS：在tsconfig.spec.json文件，我已經改變了「目標」屬性「ES6」，但它仍然無法正常工作。

來源

2017-06-20 Fel

'' – echonax

做以下修改：

@Output() onDataUpdate: EventEmitter<string[]> = new EventEmitter<string[]>();

儘量避免使用any如果你知道將要發射的類型。

在應用程序組件中，您有兩個選擇：創建一個函數來處理事件（清潔器模板），或直接在其中進行操作。顯然你不希望創建一個方法，所以下面應該工作：

<dnd-container (onDataUpdate)="targetItemsA = $event"></dnd-container>

來源

2017-06-20 12:00:35

這工作就像一個魅力，非常感謝你！ – Fel

很高興幫助:)，如果這解決了您的問題，請將其標記爲答案，以便其他人可以看到它，如果他們遇到您的問題 –

Angular2：我可以使用箭頭函數而不是方法處理@Output返回值嗎

回答

相關問題