So senden Sie Daten im Dialogfeld Material 2 Angular 2 von 1 Komponente zu anderen

Question

Ich benutze Material 2 Diloge, und ich bin in der Lage, Daten über Dilogé schließen zurück.

Aber ich bin nicht in der Lage, jede Lösung zu finden, die Daten diloge senden mit @input

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


@Component({ 
    selector: 'dialog-result-example', 
    templateUrl: './dialog-result-example.html', 
}) 
export class DialogResultExample { 
    selectedOption: string; 

    constructor(public dialog: MdDialog) {} 

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


@Component({ 
    selector: 'dialog-result-example-dialog', 
    templateUrl: './dialog-result-example-dialog.html', 
}) 
export class DialogResultExampleDialog { 
    constructor(public dialogRef: MdDialogRef<DialogResultExampleDialog>) {} 
} 

Answer 1

Sie die componentInstance Eigenschaft MdDialogRef verwenden können, wie yurzui in Schritt 8 der Antwort vorgeschlagen dazu question.

Zum Beispiel, wenn Sie den Wert foo auf eine Variable param1 in DialogResultExampleDialog, Sie tun können, folgendes passieren wollte:

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


@Component({ 
    selector: 'dialog-result-example', 
    templateUrl: './dialog-result-example.html', 
}) 
export class DialogResultExample { 
    selectedOption: string; 

    constructor(public dialog: MdDialog) {} 

    openDialog() { 
    let dialogRef = this.dialog.open(DialogResultExampleDialog); 
    dialogRef.componentInstance.param1 = "foo"; 
    dialogRef.afterClosed().subscribe(result => { 
     this.selectedOption = result; 
    }); 
    } 
} 


@Component({ 
    selector: 'dialog-result-example-dialog', 
    templateUrl: './dialog-result-example-dialog.html', 
}) 
    param1: string; 

    export class DialogResultExampleDialog { 
    constructor(public dialogRef: MdDialogRef<DialogResultExampleDialog>) {} 
} 

Answer 2

andere Art und Weise, können Sie MdDialogConfig

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


@Component({ 
    selector: 'dialog-result-example', 
    templateUrl: './dialog-result-example.html', 
}) 
export class DialogResultExample { 
    selectedOption: string; 

    constructor(public dialog: MdDialog) {} 

    openDialog() { 
    let config = new MdDialogConfig; 
    if (id) { 
     config.data = { id: id } 
    } else config.data = null; 

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


@Component({ 
    selector: 'dialog-result-example-dialog', 
    templateUrl: './dialog-result-example-dialog.html', 
}) 
export class DialogResultExampleDialog { 
    constructor(public dialogRef: MdDialogRef<DialogResultExampleDialog>) { 
    if (dialogRef.config.data) { 
      // do something... 
    } 
    } 
}