如何从Angular4的引导标签集中选择选项卡？

我有一组动态创建的选项卡，具体取决于我的输入数据。而我想要做的是能够找出当前选中哪个标签。在下面的示例代码中，我有一个选项卡控件，在所有这些下面，我有一个按钮，单击时会删除选定的选项卡。我试图保持这个相对简单，它似乎有些做作，但我希望它能够说明我的意思。如何从Angular4的引导标签集中选择选项卡？

这里是我的代码：

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


    } 

}

所以我们可以说我想删除当前选中的标签。我如何知道当前选择了哪个标签？

来源

2017-07-25 user2477533

您可以使用角@ViewChild()获取NgbTabset的活动标签ID（activeId）以从HTML中检索NgbTabset的实例。然后您可以访问类方法中的activeId。考虑到你是我们*ngIf你可能需要为question中描述的@ViewChild()创建一个setter。我已经更新了示例以使用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的功能。

希望有帮助！

来源

2017-07-25 19:09:52

我无法打开的功能要求做到以下几点： this.tabSet =在@ViewChild部分内容 ....不知道为什么，在一分钟，但我可以看到所有这些应该如何工作。 – user2477533

您收到错误？ '* ngIf'可能会阻止'@ViewChild（）'找到正在加载的元素。 –

是的，我在编译时得到一个错误： '类型'ViewContainerRef'不能分配到类型'NgbTabset'。类型'ViewContainerRef'中缺少属性'选项卡'。' 非常感谢您的帮助！ – user2477533

我建议您聆听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

来源

2017-07-25 19:49:09

如何从Angular4的引导标签集中选择选项卡？

回答

相关问题