使用從父元件傳遞的資料初始化 md-dialog

這個例子需要 MdDialogRef 和 MD_DIALOG_DATA。請在元件模組中匯入它們。

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

輸入概述 -example.html 的：

<md-input-container>
  <input mdInput 
         [(ngModel)]="id"
         placeholder="Value passed to md-dialog">
</md-input-container>

<p></p>

<button md-raised-button
     (click)="openDialog(id)">
  Open Dialog
</button>

輸入概述 -example.ts：

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

@Component({
  selector: 'input-overview-example',
  templateUrl: 'input-overview-example.html'
})
export class InputOverviewExample {
  
  id: any;
  
  @Input() isChecked: boolean;
  
  constructor(public dialog: MdDialog) {}

    openDialog(value) {
      let dialogRef = this.dialog.open(DialogResultExampleDialog, {
        data: {
          id: value
        }
      });
      dialogRef.afterClosed().subscribe(result => {
        console.log(result);
      });
    }
}

@Component({
  selector: 'dialog-result-example-dialog',
  template: `<p md-dialog-title>Confirm Toggle </p>
             <p md-dialog-content>Id passed from component: {{ this.passedId }}</p>
             <md-dialog-actions>
                <button md-button color="primary" (click)="dialogRef.close('Cancel')">Cancel</button>
                <button md-button color="primary" (click)="dialogRef.close('continue')">Continue</button>
            </md-dialog-actions>
          `,
})
export class DialogResultExampleDialog implements OnInit {
  
  passedId: string;
  
  constructor(@Inject(MD_DIALOG_DATA) private data: { id: string }, 
              public dialogRef: MdDialogRef<DialogResultExampleDialog>) {}
              
  ngOnInit(){
    this.passedId = this.data.id;  
  }
}

現場演示