如何在Angular的模态窗口中使用该功能答案

【问题标题】：How to use the function in the modal window in Angular如何在Angular的模态窗口中使用该功能
【发布时间】：2018-09-06 09:01:50
【问题描述】：

我有一个简单的文件列表和“删除”按钮。我添加了模态窗口以进行确认。但是，我不知道如何将主组件中的删除功能添加到模态窗口。对于模态窗口，我使用库 @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();
 }
}

【问题讨论】：

标签： angular typescript

【解决方案1】：

可以使用回调函数

export class FileService {

constructor(private http: HttpClient, @Inject('BASE_URL') 
baseUrl: string, public dialog: MatDialog ) {}

public openDeleteModal(name: any, id: any, cb?: any) {
   let deleteModelRef: MatDialogRef<DeleteDialog>;
   this.dialog.open(DeleteDialog, { data: { name , id} }); 

   deleteModelRef.afterClosed().subscribe(result => {
        if (cb) {
            cb();
        }
   });
}

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

和DeleteDialogue.component

@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, private fileService: FileService) { }

 public accept(): void {

  this.fileservice.openDeleteModal('name',id, cb => {
     // here you can call delete service like
     this.fileservice.fileDelete(id);
  });
 }

 close(): void {
  this.dialogRef.close();
 }
}

【讨论】：

但对话框类型上不存在属性文件服务
在构造函数中添加这个“私有文件服务：FileService”..我已经更新了答案

【解决方案2】：

在你的模态模板中添加这个：

...

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

}); }

【讨论】：