如何在ngx-bootstrap中阻止标签页切换？表单脏时弹窗确认

嘿，我之前也碰到过一模一样的需求，ngx-bootstrap的tabs组件确实没直接提供阻止切换的现成方法，但我们可以利用它的selectTab事件来实现这个带确认框的拦截逻辑，亲测好用！

实现思路 #

核心就是在标签页切换的前置事件里做判断：如果Tab1的表单处于脏状态，且用户要切换到Tab2，就弹出确认对话框，根据用户选择决定是否允许切换。

具体步骤 #

1. 模板部分（HTML）

给tabset绑定selectTab事件，同时给Tab1的表单和tabset组件添加模板变量，方便在组件里获取实例：

<tabset #tabsContainer (selectTab)="handleTabSwitch($event)">
  <tab heading="Tab 1">
    <!-- 绑定表单模板变量，方便检测脏状态 -->
    <form #tab1Form="ngForm">
      <div class="form-group">
        <label>输入框</label>
        <input type="text" name="demoField" ngModel class="form-control">
      </div>
      <!-- 其他表单控件... -->
    </form>
  </tab>
  <tab heading="Tab 2">
    <!-- Tab2的内容 -->
    <p>这是Tab2的内容</p>
  </tab>
</tabset>

2. 组件部分（TypeScript）

通过@ViewChild获取tabset和表单实例，在切换事件里做逻辑判断：

import { Component, ViewChild } from '@angular/core';
import { TabsetComponent, TabDirective } from 'ngx-bootstrap/tabs';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-tab-demo',
  templateUrl: './tab-demo.component.html'
})
export class TabDemoComponent {
  // 获取tabset组件实例
  @ViewChild('tabsContainer') tabsContainer!: TabsetComponent;
  // 获取Tab1的表单实例
  @ViewChild('tab1Form') tab1Form!: NgForm;

  handleTabSwitch(targetTab: TabDirective) {
    // 找到当前激活的标签页（也就是用户要离开的Tab）
    const currentActiveTab = this.tabsContainer.tabs.find(tab => tab.active);

    // 判断触发条件：当前是Tab1、表单脏、要切换到Tab2
    if (currentActiveTab?.heading === 'Tab 1' && this.tab1Form.dirty && targetTab.heading === 'Tab 2') {
      const userConfirm = confirm('是否放弃更改？');
      
      if (!userConfirm) {
        // 用户取消，阻止切换：重新激活原Tab，取消目标Tab的激活状态
        currentActiveTab.active = true;
        targetTab.active = false;
      } else {
        // 用户确认，允许切换，同时重置表单的脏状态（避免下次误触发）
        this.tab1Form.resetForm(this.tab1Form.value);
      }
    }
  }
}

关键细节说明 #

• selectTab事件会在标签切换之前触发，参数targetTab就是用户要切换到的目标标签，这是我们拦截的最佳时机。
• 手动设置active属性来控制标签的激活状态，就能实现“阻止切换”的效果，比用[disabled]更灵活——毕竟disabled是直接禁用点击，没法做确认弹窗的交互。
• 用户确认离开后，记得重置表单的dirty状态，不然下次再切回Tab1又切走时，会再次触发确认框，体验不太好。

内容的提问来源于stack exchange，提问作者Zlatko