如何防止在 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 中有脏表单，我想在允许用户 "navigate" 之前弹出一个 "Discard changes?" 对话框] 到 选项卡 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

这里的问题是：

@ViewChild('first') first: TabDirective;

不指向 TabDirective 而是指向原生 ElementRef ，所以 this.second.active = true; 不会使 TabDirective 活跃。

您只需使用 this.tabset.tabs[index].active = true;

即可实现

WORKING DEMO

Answer 2

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

这里的事情是 select 事件在选项卡集将所有其他选项卡的 active 属性设置为 false 之前发出，因此您需要包装选择一个的代码setTimeout 之类的选项卡。这将在选项卡集的所有内部操作之后设置活动选项卡。

Edit：正如 OP 所说，在当前（ngx-bootstrap@2.0.2），解决方法是在 tabset 组件上找到匹配的元素，并且激活：

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);
    }
  }
}

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

How to prevent tab selection on ngx-bootstrap

tabs

twitter-bootstrap

ngx-bootstrap

angular