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

Answer 1

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

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

Answer 2

接受的答案在最新的 vue 版本中已不再为我工作。

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

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

Answer 3

您可以使用主题替换 Yurzui 解决方案，例如使用模态而不是 window.comfirm()。这将在带有 RxJS 库的 Angular 17 中工作。 （希望对GeekyMonkey等人有帮助）

创建一个新的Subject()变量。

在 file.html 中为您的（点击）创建一个函数

执行：this.NameOfSubject.next();在函数中。

在NgInit中，写入Yurzui的行。 像他一样添加一个 ViewChild 但修改了：

@ViewChild('tabs', {static: true}) 选项卡：MatTabGroup;

在第二个函数（Yurzui 的拦截TabChange()）中，您可以调用模态窗口打开方法，然后订阅您的主题。

在订阅方法中，你可以这样做：

MatTabGroup.prototype._handleClick.apply(this.tabs, [tab, tabHeader, idx])

不要忘记在 .html 文件中创建模态，其中有按钮，并通过（单击）调用您之前创建的方法。

然后，代码应该打开您的自定义模式窗口并单击您在新单击函数中设置的 btn，并允许用户更改选项卡。

（无法清楚地输入我的代码，在我的手机上，抱歉）