Question

我有两个像nglow一样的ngx-bootstrap选项卡，我想以编程方式停止标签功能工作：

<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">

基本上，如果我有一个脏表格，例如标签1 ，我想弹出一个＆＃34;放弃更改？＆＃34;对话之前允许用户进行导航＆＃34;到标签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

这里的事情是select事件在tabset之前将所有其他选项卡的active属性设置为false，因此您需要包装选择{{1}中的选项卡的代码}} 或类似的东西。这将在tabset的所有内部操作之后设置活动选项卡。

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

setTimeout

Answer 2

这里的问题是：

@ViewChild('first') first: TabDirective;

未指向TabDirective但仅指向原生ElementRef，因此this.second.active = true;不会使TabDirective处于有效状态。

您可以简单地使用this.tabset.tabs[index].active = true;

来实现这一点

<强> WORKING DEMO

如何防止ngx-bootstrap上的标签选择

2 个答案: