從組件將數據傳遞到材料對話框

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' };