父函數返回undefined在子組件中 - angular2

Question

我是Angular 2中的新成員，因此請寬大處理。

我想在子組件中使用函數（在父組件中聲明）。我正在使用@output。這個函數應該返回一些字符串，並且子需要將這個字符串發送給api。

讓我有些父功能：

public ToJsonDate = (value: string) =>{ 

    try { 
     let parts = value.split('-').map(Number); 
     parts[1] -= 1; 
     let date = new Date(Date.UTC.apply(null, parts)); 
     let textContent = '/Date(' + date.getTime() + '' + this.invoiceDataParent['temp'].Zone + ')/'; 
     console.log('test1', textContent); 
     return textContent; 
    } catch(error){ 
     console.log(error); 
    } 

} 

和HTML我有：

div class="column2"><invoice [invoiceDataREST]='invoiceDataParent' (jsonDate)="ToJsonDate($event)"></invoice></div> 

子組件上，我使用的輸出機制：

@Output() jsonDate: EventEmitter<string> = new EventEmitter<string>(); 

什麼我想要做的是在另一個孩子中執行此功能：

private sendInvoiceRequest() { 
    this.isEdit = false; 

    this.invoiceDataREST['ResponseDetails'].DocumentDate = this.jsonDate.emit(this.invoiceForm.controls['docDate'].value); 
console.log('test2',this.jsonDate.emit(this.invoiceForm.controls['docDate'].value);} 

現在： test1的控制檯顯示出良好的輸出 - 所以這個功能是肯定的執行，但測試2在控制檯顯示「不確定」

有人可以解釋我什麼我做錯了？我錯過了什麼嗎？

Answer 1

Output屬性不是雙向的。他們發送數據，期間。沒有通過輸出事件發射器接收輸入。你想要做的是創建一個Input屬性以及父函數將更新的值分配給子組件。例如：

<div class="column2"><invoice [invoiceDataREST]='invoiceDataParent' (jsonDate)="ToJsonDate($event)"></invoice></div> 

export class Parent{ 



    public ToJsonDate = (value: string) =>{ 

     try { 
      let parts = value.split('-').map(Number); 
      parts[1] -= 1; 
      let date = new Date(Date.UTC.apply(null, parts)); 
      let textContent = '/Date(' + date.getTime() + '' + this.invoiceDataParent['temp'].Zone + ')/'; 
      console.log('test1', textContent); 

      //assign new value to property that goes back into child component 
      this.invoiceDataParent['ResponseDetails'].DocumentDate = textContent; 
     } catch(error){ 
      console.log(error); 
     } 

    } 

} 



export class Child{ 
    @Input() invoiceDataREST: any; 
    @Output() jsonDate: EventEmitter<string> = new EventEmitter<string>(); 

    private sendInvoiceRequest() { 
    this.isEdit = false; 

    this.jsonDate.emit(this.invoiceForm.controls['docDate'].value); 
    } 

} 

我試圖更新您的代碼以顯示這應該如何工作。 emit不會從父級檢索值。它只是發送的值給父母。父母然後將該值分配給正在發送的對象到孩子的正確屬性。

希望這會有所幫助。