angular - 有没有办法使用 ngx bootstrap 获取事件选项卡？

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

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

当标签变得活跃时会发射。你可以简单地使用它如下。

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

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

组件内部

public activeTab: string; 

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

进一步:

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