从组件将数据传递到材料对话框

Question

我一直在努力围绕从组件的数据传递到下面的材料对话框 是我的代码

首先组件的HTML文件

<button md-raised-button (click)="openDialog()"><md-icon>add</md-icon</button>

在第一组件的.ts文件

data = { 
customerid : 'abc', 
appID : 'xyz', 
description : 'this is looooooooooooooooooooooooooooooooooooooooonnnnnnnnnngggggggggggggg text' 
}; 
constructor(public dialog: MdDialog) { } 

openDialog() { 

    let dialogRef = this.dialog.open(AddEditAppDetailsComponent, { 
        width: '40%', 
        data: this.data, 
        disableClose: true, 
    }); 

    dialogRef.afterClosed().subscribe(result => { 
       console.log(`Dialog Closed: ${result}`); 
       this.dialogResult = result; 
    }); 

    dialogRef.updatePosition(); 
} 

材料对话框的html文件

<form #f="ngForm" (ngSubmit)="onCloseConfirm(f.value)"> 
    <md-dialog-content> 
     <md-grid-list cols="12" rowHeight="70px"> 
      <md-grid-tile [colspan]="6" [rowspan]="1"> 
       <md-input-container> 
        <input mdInput ngModel required #customerid=ngModel name="customerid" placeholder="Customer ID" value={{data.customerid}}> 
       </md-input-container> 
      </md-grid-tile> 
      <md-grid-tile [colspan]="6" [rowspan]="1"> 
       <md-input-container> 
        <input mdInput name="appID" placeholder="App ID" value={{data.appID}}> 
       </md-input-container> 
      </md-grid-tile> 
      <md-grid-tile [colspan]="12" [rowspan]="2"> 
       <md-input-container> 
        <textarea mdInput placeholder="Description" rows="5" value={{data.description}}></textarea> 
       </md-input-container> 
      </md-grid-tile> 
     </md-grid-list> 
    </md-dialog-content> 
</form> 
<md-dialog-actions> 
    <button md-raised-button type="submit" class="saveBTN" (click)="onCloseConfirm()">Save</button> 
</md-dialog-actions> 

所以这里的我已经这样做提到在输入字段ngModel不预填充value{{ data.customerid }}如果我删除，我已经写在第二个输入字段它不填充值。如果我提ngModel为什么它不给予预装值，任何人都可以帮助我解决这个问题。

Answer 1

从你的组件，你可以将数据传递到对话是这样的：

dialogRef.componentInstance['data'] = { id: 123, name: 'Example' };