html - 你如何从 Angular4 中的 Bootstrap 选项卡中获取选定的选项卡？

Question

我有一组根据我的输入数据动态创建的选项卡。而我想要做的是能够弄清楚当前选择了哪个选项卡。在下面的示例代码中，我有一个选项卡控件，在所有这些控件下方，我有一个按钮，单击该按钮将删除所选选项卡。我尽量保持相对简单，它可能看起来做作，但我希望它能说明我的意思。

这是我的代码:

<div class="col-md-12">
  <ngb-tabset *ngIf="selectedInfo" type="groups" >
    <ngb-tab *ngFor="let tab of selectedInfo.groups" title={{tab.name}} >
        // some stuff in the tabs
    </ngb-tab>
  </ngb-tabset>
</div>

<div>
  <button class="btn btn-primary float-left" (click)="deleteTab()" > Delete Tab </button>
</div>


export class MyTabs implements OnInit {

  selectedIfno: MyInfoClass;

  ngOnInit(): void {

    // init data

  }

  deleteTab() {


  }

}

假设我想删除当前选定的选项卡。我如何知道当前选择了哪个选项卡？

Answer 1

我建议收听 tabChange更改事件 - 这将允许您“拦截”事件页面更改的所有情况并存储有关当前所选选项卡的信息。这是这个想法的草图:


<ngb-tabset [activeId]="activeTab" (tabChange)="activeTab = $event.nextId">
...
</ngb-tabset>


还有一个工作的 plunker:http://plnkr.co/edit/4vRDHgWMhcvafXhQkxEO?p=preview

在输入答案时，我意识到您自己跟踪事件选项卡可能有点麻烦，我们可以将此功能添加到选项卡集本身。欢迎在 https://github.com/ng-bootstrap/ng-bootstrap/issues 打开功能请求