Question

我正在使用ngx tabs开发一个Angular应用程序：

<div class="modal-body">
    <tabset>
       <tab heading="1"></tab>
       <tab heading="2"></tab>
    </tabset>

</div>
<div class="modal-footer>
   <button *ngIf="Tab Selected = 1"> Save </button>
   <button *ngIf="Tab Selected = 2"> Update </button>
</div>

我想知道选择了哪个模板，所以我可以显示/隐藏正确的按钮。

Answer 1

您可以通过ViewChild获取TabsetComponent，然后查看其tabs属性，在那里您可以找到所有标签，然后很容易找出哪个是有效的。有一个例子（打开控制台查看结果）https://stackblitz.com/edit/angular-wm4ywp?file=app%2Fapp.component.ts

Answer 2

如果您遵循ngx-bootstrap文档，则可以看到有一个输出=>'select'。

选项卡激活时触发。只需使用以下即可。

<div class="modal-body">
<tabset>
   <tab heading="1" (select)="changeTab($event)"></tab>
   <tab heading="2" (select)="changeTab($event)"></tab>
</tabset>

</div>
<div class="modal-footer>
   <button *ngIf="activeTab == 1"> Save </button>
   <button *ngIf="activeTab == 2"> Update </button>
</div>

在组件内部

public activTab: string; 

changeTab($event) {
   this.activeTab = $event.heading;
}

进一步：

https://valor-software.com/ngx-bootstrap/?gclid=CjwKCAjwlejcBRAdEiwAAbj6KTeGOBoB7Q8PwR-hC4ipYDNGQPT7pFOCVLR_pQbN2n4rBHVM6RSL_xoCgPAQAvD_BwE#/tabs

有没有办法用ngxbootstrap获取活动选项卡？

2 个答案: