2017-04-27 34 views
0

子コンポーネントからデータを取得する必要があります。私の子コンポーネントはpopuにあるフォームを持っています。親コンポーネントに完全な詳細を渡すにはどうしたらいいですか? 私の親コンポーネントTSファイルがどのように角度2の子コンポーネントから親コンポーネントに値を渡すことができますか?

import { Component, OnInit } from '@angular/core'; 
import {MdDialog, MdDialogRef} from '@angular/material'; 

@Component({ 
    selector: 'app-vehicle-relocate', 
    templateUrl: './vehicle-relocate.component.html', 
    styleUrls: ['./vehicle-relocate.component.css'], 
}) 
export class VehicleRelocateComponent implements OnInit { 

    lat: number = 11.074529; 
    lng: number = 78.003917; 
    zoom: number = 14; 

    ngOnInit() { 
    } 

    selectedOption: string; 

    constructor(public dialog: MdDialog) {} 

    openDialog() { 
    let dialogRef = this.dialog.open(); 
    dialogRef.afterClosed().subscribe(result => { 
     this.selectedOption = result; 
    }); 
    } 
} 

である私の子コンポーネントは、あなたがあなたの子コンポーネントにOutputを追加することができ、親コンポーネントに

import { Component, OnInit, Input } from '@angular/core'; 
import {MdDialog, MdDialogRef} from '@angular/material'; 

@Component({ 
    selector: 'app-relocate-form', 
    templateUrl: './relocate-form.component.html', 
    styleUrls: ['./relocate-form.component.css'] 
}) 
export class RelocateFormComponent implements OnInit { 

    constructor(public dialogRef: MdDialogRef<RelocateFormComponent>) {} 
    @Input() title:string; 

    ngOnInit() { 
    } 

} 
+0

それは役に立ちますか? https://github.com/angular/material2/blob/master/src/demo-app/dialog/dialog-demo.ts –

+0

どちらが子コンポーネントですか? –

+0

2番目は子コンポーネントです – niranchan

答えて

1

です。 例:@Output() notifySubmit : EventEmitter<any> = new EventEmitter<any>()(「any」が不要な場合は、任意のタイプを入力できます)。

あなたの子コンポーネントにフォームを送信しているときに、あなたがOutputで親に通知する必要があります。

this.notifySubmit.emit(myValues) 

は今、あなたは親コンポーネントにイベントを受信する必要があります。 RelocateFormComponentからVehicleRelocateComponentに電話するときは、Outputに機能を渡す必要があります。

<app-relocate-form (notifySubmit)="myFunction($event)" ... ></app-relocate-form> 

myFunction($event)は、親コンポーネント内にある必要があります。 $eventのパラメータは、this.notifySubmit.emit(myValues)で送信したものと同じです。

関連する問題