angular - 角度对话框参数
问题描述
我想实现一个包含一些数据 API 的对话框。在实现对话框之前,API 由参数 id 通过routerLink调用,但是当我选择对话框时,没有相同的参数,所以我无法将 id 传递给对话框以进行 API 调用。
我尝试使用对话框创建功能传递 id,但这也没有按照要求工作。
HTML:
<button color="primary" matTooltip="Audit Order" (click)="onCreate(orders.orderId)" style="background-color:rgba(251, 230, 221, 1); border-radius: 5px;">
AUDIT
</button>
TS:
import { MatDialog, MatDialogConfig } from '@angular/material';
import { AuditPopupComponent } from '../audit-popup/audit-popup.component';
@Component({
selector: 'kt-audit',
templateUrl: './audit.component.html',
styleUrls: ['./audit.component.scss']
})
export class AuditComponent implements OnInit {
constructor(private dailog: MatDialog) {}
ngOnInit() {}
onCreate(orderId){
this.route.params.subscribe(params => {
this._Order.viewOrders(orderId).subscribe(res => {
this.orderDetails = res.data;
});
});
const dailogConfig = new MatDialogConfig();
// dailogConfig.disableClose = true;
dailogConfig.autoFocus = true;
dailogConfig.width = "50%";
this.dailog.open(AuditPopupComponent, dailogConfig);
}
}
子组件 TS:
ngOnInit() {
this.route.params.subscribe(params => {
this.ps.viewOrders(params['id']).subscribe(res => {
this.ordersView = res.data;
});
});
}
解决方案
您只需通过对话框选项将数据传递给对话框:
TS:
import { MatDialog, MatDialogConfig } from '@angular/material';
import { AuditPopupComponent } from '../audit-popup/audit-popup.component';
@Component({
selector: 'kt-audit',
templateUrl: './audit.component.html',
styleUrls: ['./audit.component.scss']
})
export class AuditComponent implements OnInit {
constructor(private dailog: MatDialog) {}
ngOnInit() {}
onCreate(orderId){
this.route.params.subscribe(params => {
this._Order.viewOrders(orderId).subscribe(res => {
this.dailog.open(AuditPopupComponent, {
autoFocus: true,
width: "50%",
data: res.data
});
});
});
}
}
对话:
import { MAT_DIALOG_DATA } from '@angular/material';
import { Inject } from '@angular/core';
@Component({
selector: 'dialog-data-example-dialog',
templateUrl: 'dialog-data-example-dialog.html',
})
export class DialogDataExampleDialog {
constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
ngOnInit() {
this.ordersView = this.data;
}
}
推荐阅读
- javascript - Mochawesome 包含 javascript 代码而不是 typescript
- powershell - Powershell 创建文件夹名称
- android-jetpack-compose - Jetpack Compose 中的 NoClassDefFoundError
- git - 为什么远程访问 Heroku Git 时会出错?
- python - 使用 SimpleTransformers 与使用 BERT 的 Transformers 库获得更高的准确度
- python - 使用具有日期时间维度的 xarray DataArray 中的数据着色器进行绘图
- javascript - HTML5 DragDrop Enter和Leave事件依次调用
- python - 加载图像后,我尝试运行音频文件
- sql - Delete or overwrite sql table and views from databricks
- python-3.x - 如果列值等于,如何将 csv 文件写入另一个 csv 文件?