如何防止在 ngx-bootstrap 上选择选项卡

Question

我有两个带有 ngx-bootstrap 的标签，如下所示，我想以编程方式停止标签功能 rom 工作：

<tabset>
    <tab heading="First">Tab 1 content</tab>
    <tab heading="Second">Tab 2 content</tab>
</tabset>

<label>Edit in progress: </label>
<input type="checkbox" [(ngModel)]="isTabSwitchEnabled">

基本上，如果我在Tab 1 中有一个脏表单，我想弹出一个“放弃更改？” 在允许用户“导航”到Tab 2之前的对话框。我在 ngx-bootstrap tabs API 上没有看到我可以使用的任何内容。

我有一个示例Stackblitz，我尝试[disabled]在选项卡上使用它，它可以部分工作，但不能完全工作，因为我无法以编程方式设置选项卡处于活动状态（或者我不知道如何）：

export class MyComponent  {
  disableSwitching: boolean;
  @ViewChild('tabset') tabset: TabsetComponent;
  @ViewChild('first') first: TabDirective;
  @ViewChild('second') second: TabDirective;

  confirmTabSwitch($event) {
    if (this.disableSwitching) {
      const confirm = window.confirm('Discard changes and switch tab?');
      if (confirm) {
        this.disableSwitching = false;
        this.second.active = true;
      }
    }
  }

}

在this.second.active = true不切换到新的选项卡，只标记激活它。如果我尝试使用this.tabset.tabs[index].active = true;.

有没有办法拥有这个功能？启用和禁用切换标签？理想情况下也将它绑定到路由器（但我绝对需要程序访问）。

Answer 1

这是一个有效的 stackblitz 示例 - https://stackblitz.com/edit/ngx-bootstrap-tabs-rs832l?file=app/app.component.ts

这里的问题是，事件在 tabset 将所有其他选项卡的属性select设置为之前发出，因此您需要将选择选项卡的代码包装在 a或类似的内容中。这将在选项卡集的所有内部操作之后设置活动选项卡。activefalsesetTimeout

编辑：正如OP所说，当前（ngx-bootstrap@2.0.2）的解决方法是在选项卡集组件上找到匹配的元素并激活：

confirmTabSwitch($event) {
  if (this.disableSwitching) {
    const confirm = window.confirm('Discard changes and switch tab?');
    if (confirm) {
      this.disableSwitching = false;
      const liArr = Array.from(this.tabsetEl.nativeElement.querySelectorAll('ul li'));
      let tabIndex;
      liArr.forEach((li, i) => {
        if(li.contains($event.target)) {
          tabIndex = i;
        }
      });
      setTimeout(() => this.tabset.tabs[tabIndex].active = true);
    }
  }
}