Как отправить данные в диалоговом окне Material 2 Угловой 2 от 1 компонента к другому

Question

Я использую diloge Material 2, и я могу получить данные о близком расстоянии.

Но я не могу найти какое-либо решение для передачи данных по diloge с @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

Вы можете использовать componentInstance свойство из MdDialogRef, как это было предложено yurzui в Шаг 8 ответа к этому question.

Например, если вы хотите, чтобы передать значение Foo к переменной param1 в DialogResultExampleDialog, вы можете сделать следующее:

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

Другим способом, вы можете использовать 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... 
    } 
    } 
}