如何防止在确认之前更改 MatTab？

Question

我想保留更改MatTab直到得到确认。我已经用来MatDialog确认了。问题是，在单击“是”之前，选项卡已更改。

例如，在收入选项卡中，我单击调整选项卡。在切换到该选项卡之前，我需要先显示弹出窗口。但我在移动到调整选项卡后收到弹出窗口。

组件模板：

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

Answer 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 中我简单地使用确认对话框 -

如果我们使用 mat-dialog 会出现更新问题。

还有另一种方法可以覆盖 mat-tab-group 的行为

我们需要更改_handleClickmat-tab-group 的功能（请参阅github_handleKeydown中的此功能）和mat-h​​eader 的功能（请参阅github中的此功能

这有点复杂，但唯一的方法是使用 ViewChild 获取垫子组（我使用它{static:true}是因为我的选项卡组始终可见。

@ViewChild('tabgroup', { static: true }) tabgroup: MatTabGroup;

然后，在 ngOnInit 中（如果不是 static:true，我们使用 ngAfterViewInit），只需重新定义该函数即可。对于这第一次“转换”到任何 this.tabgroup

首先我们创建一个函数alertDialog

  alertDialog(index:number,tab:MatTab,tabHeader:any,)
  {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      data: {},
    });
    const res = dialogRef.afterClosed().subscribe((result) => {
      if (result) {
        tabHeader.focusIndex = index;

        if (!tab.disabled) {
          this.tabgroup.selectedIndex = index;
        }
      }
    });

  }

然后，在 ngOnInit 中我们写

ngOnInit(){
    (this.tabgroup as any)._handleClick = (
      tab: MatTab,
      tabHeader: any,
      index: number
    ) => {
      if (this.tabgroup.selectedIndex != index)
        this.alertDialog(index, tab, tabHeader);
    };
}

为了覆盖，_handleKeydown我们将所有内容都包含在 setTimeout 中，以便给 Angular 时间来绘制 mat-tab-header

  ngOnInit() {
    ....
    setTimeout(() => {
      const tabHeader = (this.tabgroup as any)._tabHeader;
      tabHeader._handleKeydown = (event: KeyboardEvent) => {
        if (hasModifierKey(event)) {
          return;
        }

        switch (event.keyCode) {
          case ENTER:
          case SPACE:
            if (tabHeader.focusIndex !== tabHeader.selectedIndex) {
              const item = tabHeader._items.get(tabHeader.focusIndex);
              this.alertDialog(tabHeader.focusIndex, item, tabHeader);
            }
            break;
          default:
            tabHeader._keyManager.onKeydown(event);
        }
      };
    });

在新的stackblit中可以看到