[英]How to use the function in the modal window in Angular
I have a simply list of files and button "Delete". 我有一个简单的文件列表和“删除”按钮。 I added modal window for confirmation.But, i dont know how to add my Delete function that is in main component to the modal window.For modal window Im using library @angular/material.
我添加了模态窗口进行确认。但是,我不知道如何在模态窗口中添加主要组件中的Delete函数。对于模态窗口Im使用库@ angular / material。 My goal is delete file by clicking button with class=accept() in modal window.
我的目标是通过在模式窗口中单击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();
}
}
You can use the callback function 您可以使用回调函数
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);
})
}
}
and DeleteDialogue.component
和
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();
}
}
add this at your modal template: 将此添加到您的模式模板:
...
<mat-dialog-actions align="end">
<button mat-button mat-dialog-close>Cancel</button>
<button mat-button [mat-dialog-close]="data" cdkFocusInitial>DELETE</button>
...
subscribe for data 订阅数据
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);
})
}); }); }
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.