4

我有一个使用角度材料选项卡组的角度组件。

<mat-tab-group>
  <mat-tab label="First"> <app-comp1></app-comp1> </mat-tab>
  <mat-tab label="Second"> <app-comp2></app-comp2> </mat-tab>
  <mat-tab label="Third"> <app-comp3></app-comp3> </mat-tab>
</mat-tab-group>

在某个选项卡中，用户可以进行一些更改并保存。如果用户做了一些更改并尝试导航到另一个选项卡而不保存，我想在导航到另一个选项卡之前要求用户确认放弃更改。

有没有办法做到这一点？

4

2 回答 2

21

如果今天没有解决方案，那么我可以为您提供一些基于猴子补丁的技巧：

模板.html

<mat-tab-group #tabs>
  ...
</mat-tab-group>

组件.ts

import { MatTabGroup, MatTabHeader, MatTab } from '@angular/material';
...
@Component({...})
export class AppComponent implement OnInit {
  @ViewChild('tabs') tabs: MatTabGroup;

  ngOnInit() {
    this.tabs._handleClick = this.interceptTabChange.bind(this);
  }

  interceptTabChange(tab: MatTab, tabHeader: MatTabHeader, idx: number) {
    const result = confirm(`Do you really want to leave the tab ${idx}?`);

    return result && MatTabGroup.prototype._handleClick.apply(this.tabs, arguments);
  }
}

Ng 运行示例

于 2018-07-16T03:59:38.890 回答
1

在最新的 vue 版本中，接受的答案已停止为我工作。

另一种选择是在活动选项卡处于不完整状态时将其他选项卡设置为禁用。

<mat-tab-group>
  <mat-tab label="Form">Form Here</mat-tab>
  <mat-tab label="Result" >Result Here</mat-tab>
</mat-tab-group>
于 2020-06-25T07:05:28.237 回答