twitter-bootstrap 你如何从 Angular4 的引导标签集中获得选定的标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45311454/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you get the selected tab from a bootstrap tabset in Angular4?
提问by user2477533
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.
我有一组动态创建的选项卡，取决于我的输入数据。而我想要做的是能够弄清楚当前选择了哪个选项卡。在下面的示例代码中，我有一个选项卡控件，在所有这些控件下方，我有一个按钮，单击该按钮将删除选定的选项卡。我试图保持这个相对简单，它可能看起来很做作，但我希望它可以说明我的意思。
Here's my code:
这是我的代码：
<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?
所以假设我想删除当前选择的选项卡。我如何知道当前选择了哪个选项卡？
回答by pkozlowski.opensource
I would suggest listening to the tabChangechange event - this would allow you to "intercept" all the cases where the active page changes and store info about the currently selected tab. Here is the sketch of the idea:
我建议收听tabChange更改事件 - 这将允许您“拦截”活动页面更改并存储有关当前选定选项卡的信息的所有情况。这是这个想法的草图：
<ngb-tabset [activeId]="activeTab" (tabChange)="activeTab = $event.nextId">
...
</ngb-tabset>
<ngb-tabset [activeId]="activeTab" (tabChange)="activeTab = $event.nextId">
...
</ngb-tabset>
And a working plunker: http://plnkr.co/edit/4vRDHgWMhcvafXhQkxEO?p=preview
还有一个工作plunker：http://plnkr.co/edit/4vRDHgWMhcvafXhQkxEO?p=preview
While typing the answer I've realized that keeping track of the active tab yourselfmight be a bit of pain and we could add this functionality to the tabset itself. Feel free to open a feature request at https://github.com/ng-bootstrap/ng-bootstrap/issues
当键入答案我已经意识到保持活动标签的轨道自己可能会有点痛苦的，我们可以添加此功能的标签集本身。随意在https://github.com/ng-bootstrap/ng-bootstrap/issues打开功能请求
回答by Alexander Staroselsky
You can get the active tab id (activeId) for NgbTabsetusing Angular @ViewChild()to retrieve an instance of the the NgbTabsetfrom the HTML. You'd then have access to the activeIdin the class methods. Considering you are us *ngIfyou may need to create a setter for @ViewChild()described in this question. I've updated the example to use the setter.
您可以使用 Angular获取NgbTabset的活动选项卡 ID ( activeId)，以从 HTML 中检索 的实例。然后您就可以访问类中的方法。考虑到您是我们，您可能需要为此问题中的描述创建一个二传手。我已经更新了示例以使用 setter。@ViewChild()NgbTabsetactiveId*ngIf@ViewChild()
HTML:
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:
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);
}
}
Here is a plunkerdemonstrating the functionality.
这是一个演示功能的plunker。
