如何有条件地阻止用户导航到 mat-tab-group 中的其他选项卡答案

【问题标题】：How to conditionally prevent user from navigating to other tab in mat-tab-group如何有条件地阻止用户导航到 mat-tab-group 中的其他选项卡
【发布时间】：2018-12-23 13:08:16
【问题描述】：

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

<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>

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

有什么办法吗？

【问题讨论】：

如果你使用路由，你可以使用CanDeactivate router guard。
github.com/angular/material2/issues/2013
假设用户在标签一中进行了一些更改，然后尝试导航到标签二，您可以将第二个和第三个标签标签与 (click) 事件绑定，以检查用户是否完成了某些工作或不是，如果是，则显示保存数据的弹出窗口（直接保存或将用户路由回选项卡一）或丢弃，如果丢弃则删除用户的活动，因此单击任何其他选项卡时不会显示弹出窗口.
stackoverflow.com/questions/56607394/…

标签： angular angular-material mat-tab

【解决方案1】：

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

template.html

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

component.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-run Example

【讨论】：

这很好用，但你能解释一下它是如何工作的吗？这是 Angular / Material / Html / Javascript 的一部分吗？
这确实可以防止选项卡更改，但它收到的选项卡信息是针对请求的新选项卡，而不是先前活动的选项卡。所以在我的情况下，这并不比内置的选项卡更改事件更好。
@GeekyMonkey 你可以通过this.tabs.selectedIndex获得之前活跃的标签
谢谢@yurzui。这是天才，正是我所需要的。需要注意的一件事可能对其他人有帮助的是arguments，请确保传递@yurizui 已记录参数的选项卡、tabHeader 和idx。 apply(this.tabs, [tab, tabHeader, idx])
@Dodi 如果您使用 Angular 9 及更高版本，请考虑将 static: true 添加到 @ViewChild 装饰器

【解决方案2】：

在最新的 vue 版本中，已接受的答案对我不起作用。

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

<mat-tab-group>
  <mat-tab label="Form">Form Here</mat-tab>
  <mat-tab label="Result" >Result Here</mat-tab>
</mat-tab-group>

【讨论】：