如何从Angular4的引导选项卡集中获取选定的选项卡? [英] How do you get the selected tab from a bootstrap tabset in Angular4?

问题描述

我有一组根据我的输入数据动态创建的选项卡.我想做的是能够弄清楚当前选择了哪个选项卡.在下面的示例代码中，我有一个选项卡控件，而在这下方，我有一个按钮，单击该按钮将删除所选的选项卡.我试图使它相对简单，并且看起来似乎是人为的，但我希望它确实能够说明我的意思.

I have a set of tabs that I create dynamically, dependent on my input data. And what I want to do is to be able to figure out which tab is currently selected. In the example code below, I have a tab control and beneath all this, I have a button that when clicked will delete the selected tab. I've tried to keep this relatively simple and it might seem contrived, but I hope it does to illustrate what I mean.

这是我的代码:

<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() {


  }

}

因此，假设我要删除当前选择的标签.我怎么知道当前选择了哪个选项卡?

So let's say I want to delete the currently selected tab. How do I know what tab is currently selected?

推荐答案

您可以获取activeId) /tabs/api"rel =" nofollow noreferrer> NgbTabset 使用Angular @ViewChild()从HTML检索NgbTabset的实例.然后，您可以在类方法中访问activeId.考虑到您是我们*ngIf，您可能需要为此问题中描述的@ViewChild()创建设置器. .我已经更新了示例以使用二传手.

You can get the active tab id (activeId) for NgbTabset using Angular @ViewChild() to retrieve an instance of the the NgbTabset from the HTML. You'd then have access to the activeId in the class methods. Considering you are us *ngIf you may need to create a setter for @ViewChild() described in this question. I've updated the example to use the setter.

HTML:

<div class="col-md-12">
  <ngb-tabset #t="ngbTabset" *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>

TS:

import { Component, ViewChild, ViewContainerRef } from '@angular/core';
import { NgbTabset } from '@ng-bootstrap/ng-bootstrap';

export class MyTabs implements OnInit {
  private tabSet: ViewContainerRef;

  @ViewChild(NgbTabset) set content(content: ViewContainerRef) {
    this.tabSet = content;
  };

  ngAfterViewInit() {
    console.log(this.tabSet.activeId);
  }

  deleteTab() {
    // currently selected tab id
    console.log(this.tabSet.activeId);
  }
}

这是 plunker 演示的功能.

这篇关于如何从Angular4的引导选项卡集中获取选定的选项卡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！