从Angular中的另一个组件激活动作

时间:2020-07-31 15:59:45

标签: html angular typescript angular-material dialog

我有这个布尔值,在我的Chart List组件中包装了一些代码,我想知道是否有一种方法可以从另一个组件TS文件中激活/设置True。

我遇到的错误:

现在,即使我取消了“删除”对话框中的删除操作或关闭了该图表,该图表仍从列表中消失,因此我认为在代码上使用布尔值换行,然后在其中删除并仅在“删除”按钮上调用它会解决该问题,但不确定如何实现。

Chart-List.TS

chartDeleted:boolean = false;

  deleteChart() {
    let dialogRef = this.dialog.open(DeleteWsDialogComponent, {
      data: {
        chart: this.chart, isChart: true
      }
    });

   // I want to activate this code from another component
    if(this.chartDeleted){ 
      dialogRef.afterClosed().subscribe(result => {
        this.removeFromList.emit(this.chart.id);
        console.log(result + "THIS IS THE RESULT")
      })
    }
  }

删除Dialog.TS


  onDeleteClick(): void {
      this.chartService.deleteChart(this.chart.guid).subscribe(response =>{
        this.dialogRef.close(); 
         //Activate right here

        this.snackbar.open("\"" + this.chart.name.toUpperCase() + "\""+ " chart has been deleted", "", {duration: 2500})
      }, error => {
        this.snackbar.open("\"" + this.chart.name.toUpperCase() + "\""+ " could not be deleted", "", {duration: 2500})
        this.dialogRef.close();
      })
  }

删除对话框。HTML

<button mat-raised-button color="primary" mat-dialog-close">Cancel</button>
<button mat-raised-button color="warn" (click)="onDeleteClick()"">Delete.</button>

1 个答案:

答案 0 :(得分:0)

只需将数据从Dialog组件传递回close()方法中的父对象

ProcessAction(){ this.dialogRef.close({event:this.action,data:this.local_data}); } 

closeDialog(){ this.dialogRef.close({event:'Cancel'}); }

然后在父项中,检查关闭对话框时得到的事件类型

dialogRef.afterClosed().subscribe(result => { if(result.event == 'remove'){ this.addRowData(result.data); }else if(result.event == 'Update'){ this.updateRowData(result.data); }else if(result.event == 'Delete'){ this.deleteRowData(result.data); } });