如何防止更改 MatTab 直到确认？答案

【问题标题】：How to prevent changing MatTab until confirmation?如何防止更改 MatTab 直到确认？
【发布时间】：2021-10-25 13:22:23
【问题描述】：

我想保留MatTab 的更改直到得到确认。我已使用MatDialog 进行确认。 问题是，在点击“是”之前，选项卡已经更改。

例如，从收入标签，我点击调整标签。在切换到该标签之前，我需要先显示弹出窗口。但是在移动到 adjustment 选项卡后，我得到了弹出窗口。

组件模板：

 <mat-tab-group (click)="tabClick($event)">
  <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
    <app-spread></app-spread
  </mat-tab>
</mat-tab-group>

组件ts（onClick的方法）：

tabClick(clickEvent: any) {
    if (clickEvent.target.innerText != 'First') {
      this.confirm();
    }
  }
  public async confirm() {
    const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
      maxHeight: '200px',
      maxWidth: '767px',
      width: '360px',
      disableClose: true,
      data: {
        title: 'Confirmation Message',
        content:
          'There are valid statements that are not Final. Set the statements as Final?'
      }
    });
    const res = dialogRef.afterClosed().subscribe(result => {
      if (result === 1) {
        //TODO need to change the tab
      } else {
        //TODO no need to change the tab
      }
    });
  }

【问题讨论】：

你可能会觉得this GitHub issue很有趣。

标签： angular typescript angular-material mat-tab

【解决方案1】：

前段时间我在这个SO中模拟了一个“mat-tab”

我想你可以用它只改变功能

<mat-tab-group #tabgroup style="margin-bottom:5px;" 
               animationDuration="0"   mat-align-tabs="start"
               (selectedIndexChange)="change(tabgroup,$event)">
...
</mat-tab-group>

以及功能变化：

  change(tab:any,index:number)
  {
    if (tab.selectedIndex!=this.indexOld){
      const dialogRef = this.dialog.open(....)
      const res = dialogRef.afterClosed().subscribe(result => {
        if (result === 1) {
           this.index=index;
        } else {
           tab.selectedIndex=this.indexOld;
        }
      });
    }
    else
    {
       this.index=index;
    }
  }

查看 stackblitz - 在 stackblitz 我简单地使用确认对话框-

【讨论】：