angular - 如何在Angular的模态窗口中使用该功能
问题描述
我有一个简单的文件列表和“删除”按钮。我添加了模态窗口以进行确认。但是,我不知道如何将主组件中的删除功能添加到模态窗口。对于模态窗口,我使用库 @angular/material。我的目标是通过在模态窗口中单击带有 class=accept() 的按钮来删除文件。
export class FileService {
constructor(private http: HttpClient, @Inject('BASE_URL')
baseUrl: string, public dialog: MatDialog ) {}
public openDeleteModal(name: any, id: any) {
this.dialog.open(DeleteDialog, { data: { name , id} });
}
public fileDelete(id) {
return this.http.delete(this.Url + '/delete' + id).subscribe(
data => {
console.log("DELETE Request is successful ", data);
},
error => {
console.log("Error", error);
})
}
}
@Component({
selector: 'list-files-deletedialog',
templateUrl: './list-files-deletedialog.component.html',
})
export class DeleteDialog {
constructor(public dialogRef: MatDialogRef<DeleteDialog>,
@Inject(MAT_DIALOG_DATA) public data: any) { }
public accept(): void {
// here i want to implement function fileDelete
}
close(): void {
this.dialogRef.close();
}
}
解决方案
在你的模态模板中添加这个:
...
<mat-dialog-actions align="end">
<button mat-button mat-dialog-close>Cancel</button>
<button mat-button [mat-dialog-close]="data" cdkFocusInitial>DELETE</button>
...
订阅数据
openDialog(data) {
const dialogRef = this.dialog.open(DialogContentExampleDialog);
dialogRef.afterClosed().subscribe(data=> {
return this.http.delete(this.Url + '/delete' + id).subscribe(
data => {
console.log("DELETE Request is successful ", data);
},
error => {
console.log("Error", error);
})
}); }
推荐阅读
- dax - 如何交叉连接从 Generateseries 创建的 Dax 中的两个表?
- apache-kafka - 在分区 kafka 中获取最后提交的消息
- amazon-web-services - 我们能否对 AWS 组织中的成员账户强制执行最大使用限制或最大成本 ($)?
- c# - Java Web 服务响应中的 WCF 服务引用接口和过多的命名空间
- docker - kubernetes Clusterip+port 在某些情况下无法访问
- gzip - 在 gnu 并行运行时如何 gzip tee 输出?
- sql - 获取未显示或未回答的问题列表
- go - Golang 百万分之一的概率
- kubernetes - 在项目级别安装 Istio
- javascript - 如何在基本 Javascript 中将“img”标签添加到“p”元素?