如何在 Material 2 对话框 Angular 2 中将数据从 1 个组件发送到其他组件

Question

我正在使用 Material 2 对话框，我可以在对话框关闭时取回数据。

但我无法找到任何解决方案来通过 @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

您可以使用 MdDialogRef, as suggested by yurzui in Step 8 of the answer to this question 的 componentInstance 属性。

例如，如果您想将值 foo 传递给 DialogResultExampleDialog 中的变量 param1，您可以执行以下操作：

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...
     }
  }
}

如何在 Material 2 对话框 Angular 2 中将数据从 1 个组件发送到其他组件

How to send data in Material 2 dialog Angular 2 from 1 component to other

angular

angular-material2