如何有条件地防止用户导航到mat-tab-group中的其他选项卡 [英] How to conditionally prevent user from navigating to other tab in mat-tab-group

问题描述

我有一个角度组件，该组件使用一个角度材质选项卡组.

I have an angular component which uses an angular material tab group.

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

在特定选项卡中，用户可以进行一些更改并保存.如果用户进行了一些更改并尝试导航到另一个选项卡而不保存，那么我想请用户确认以放弃更改，然后再导航到另一个选项卡.

In a certain tab, user can do some changes and save. If user did some changes and tries to navigate to another tab without saving, I want to ask the user for confirmation to discard changes before navigating to the other tab.

有什么办法吗?

推荐答案

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

If there is no solution today then i can offer you some trick based on monkey patching:

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运行示例

Ng-run Example

这篇关于如何有条件地防止用户导航到mat-tab-group中的其他选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！