2017-04-25 13 views
1

私はAngular 2で新しくなっていますので寛大でください。親コンポーネントの戻り値は子コンポーネントでは定義されていません - angular2

子コンポーネントでfunction(親コンポーネントで宣言されている)を使用します。私は@出力を使用しています。この関数は文字列を返す必要があり、子はこの文字列を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を

を「未定義」を示す誰かが私が間違って何をやっている私を説明できますか?何か不足していますか?

答えて

1

Outputプロパティは双方向ではありません。彼らはデータを期間外に送信します。出力イベントエミッターを介して入力を受け取ることはありません。あなたがしたいことはInputプロパティを作成するだけでなく、親関数が子コンポーネントに対してに更新された値を割り当てることです。例:

これがどのように動作するかを示すコードを更新しようとしました。 emitは、親から値を取得しません。それは単にの値をに送信します。親は、次に、に送信されるオブジェクトの正しいプロパティに値を割り当てます。子にはと入力します。

これが役に立ちます。

+0

よろしくお願いします。 – Karolina

関連する問題