gpt4 book ai didi

Angular Material 选项卡 : Prevent tab change of mat-tab-group if the form in current tab is dirty

转载 作者:行者123 更新时间:2023-12-04 02:47:48 30 4
gpt4 key购买 nike

如果当前事件选项卡中的表单很脏,我试图阻止 mat-tab 的选项卡更改。

但是我找不到拦截选项卡更改事件的方法。

<mat-tab-group>

<mat-tab label="Tab 0" >

// Tab 0 Content

</mat-tab>

<mat-tab label="Tab 1" >

// Tab 1 Content

</mat-tab>

<mat-tab label="Tab 2" >

// Tab 2 Content

</mat-tab>

</mat-tab-group>

即使有 selectedTabChange 事件,我们也无法阻止选项卡更改。我们只能在选项卡更改后以编程方式切换选项卡。

我有一个技巧可以使它成为可能。如果有人遇到相同的情况,请在此处发布以提供帮助。

最佳答案

此解决方案只是一种变通方法,并且有其缺陷。它在下面提到。
步骤:
在模板 中:

  • 禁用 mat-tab-group 的所有选项卡<mat-tab label="Tab 0" disabled>
  • 在 mat-tab-group 上提供点击事件处理程序。
    还使用组件类中的变量设置 selectedIndex 属性。<mat-tab-group (click)="tabClick($event)" [selectedIndex]="selectedTabIndex">

  • 在组件类 中:
  • 声明变量 selectedTabIndexselectedTabIndex = 0;
  • 创建一个方法来获取标签索引,提供标签标签。
     getTabIndex(tabName: string): number {

    switch (tabName) {
    case 'Tab 0': return 0;
    case 'Tab 1': return 1;
    case 'Tab 2': return 2;
    default: return -1; // return -1 if clicked text is not a tab label text
    }

    }
    我们可以从 click 事件的一个属性中获取 tab-label 文本
    `clickEventName.toElement.innerText`
  • 创建处理 mat-tab-group 上的点击事件的方法。
     tabClick(clickEvent: any) {

    // Get the index of clicked tab using the above function
    const clickedTabIndex = this.getTabIndex(clickEvent.toElement.innerText);

    // if click was not on a tab label, do nothing
    if (clickedTabIndex === -1) {
    return;
    }

    // if current tab is same as clicked tab, no need to change.
    //Otherwise check whether editing is going on and decide

    if (!(this.selectedTabIndex === clickedTabIndex)) {

    if ( /*logic for form dirty check*/ ) {

    // if form is dirty, show a warning modal and don't change tab.
    }
    else {

    // if form is not dirty, change the tab
    this.selectedTabIndex = clickedTabIndex;
    }
    }
    }

  • 在我的情况下,每个选项卡内容都在单独的组件中。所以我使用 @ViewChild 来访问它们并检查任何表单是否脏。
    缺陷 :
  • 由于此方法使用单击元素的文本来切换选项卡,因此您的一个选项卡可能包含一些与文本内容相同的元素
    其他选项卡的标题。
    因此它可能会触发选项卡更改。如果可能,您可以在单击事件中查找其他属性以防止出现这种情况。
    我在 tabClick() 方法的开头使用了以下代码
     if (!((clickEvent.toElement.className).toString().includes('mat-tab-label'))) {
    return;
    }
  • 您可能需要覆盖 cssdisabled 状态的 mat-tab 以使其看起来自然

  • 模板 :
    <mat-tab-group  (click)="tabClick($event)" [selectedIndex]="selectedTabIndex">

    <mat-tab label="Tab 0" disabled>

    // Tab 0 Content

    </mat-tab>

    <mat-tab label="Tab 1" disabled>

    // Tab 1 Content

    </mat-tab>

    <mat-tab label="Tab 2" disabled>

    // Tab 2 Content

    </mat-tab>

    </mat-tab-group>

    关于 Angular Material 选项卡 : Prevent tab change of mat-tab-group if the form in current tab is dirty,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56607394/

    30 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com