如何在Angular中实现删除功能

Question

我在Angular小组项目中，我正在尝试为当前工作区实现删除功能，但我不知道如何做到这一点。关于如何做到这一点，有什么建议或帮助吗？

在add-workspace.HTML文件中，我有一个显示对话框(删除工作区对话框(的按钮。

在删除工作空间对话框组件文件中，有一个删除按钮。我正在尝试使用该按钮删除当前工作区。

在delete-workspace.dialog.ts文件内，也称为删除对话框

export class DeleteWorkspaceDialogComponent implements OnInit {
constructor(
public dialogRef: MatDialogRef<DeleteWorkspaceDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) { }
ngOnInit(): void {
}
onNoClick(): void {
this.dialogRef.close();
}
onDeleteClick(): void{
// Delete workspace here
}

}

我正试图使用"是的，删除它"按钮来删除当前工作区

Answer 1

希望下面的片段能有所帮助：

在删除弹出组件中：

import { WorkspaceService } from 'src/app/core/services/workspace.service';
export class DeleteWorkspaceDialogComponent implements OnInit {
constructor(
public dialogRef: MatDialogRef<DeleteWorkspaceDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any,
private workspaceService: WorkspaceService) { }
ngOnInit(): void {
}
onNoClick(): void {
this.dialogRef.close();
}
onDeleteClick(): void{
// Delete workspace here
this.workspaceService.deleteWorkspace(data.workspace).subscribe(response=>{
// Do some logic and close the popup
this.dialogRef.close();
},error=>{
// Error handling and close the popup
this.dialogRef.close();
})
}
}

从父组件打开删除弹出窗口：

HTML:

<button (click)="delete()">Delete</button>

TS:

delete(){
this.dialog.open(DeleteWorkspaceDialogComponent,{
data: {
workspace: this.workspace
}
});
}

在这里，您正在传递要删除的工作空间，在删除弹出窗口中，您正在调用服务来删除工作空间。

希望它能有所帮助。