[英]Passing id as a parameter in URL from component to Angular material dialog
[英]Passing data from a component to Material Dialog
我一直在努力将数据从组件传递到“材质”对话框,下面是我的代码
第一个组件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
为什么它没有给出预加载的值,任何人都可以帮我这个忙。
您可以从组件中将数据传递到对话框,如下所示:
dialogRef.componentInstance['data'] = { id: 123, name: 'Example' };
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.