Есть ли способ получить активную вкладку с помощью ngxbootstrap?

Я разрабатываю приложение Angular, используя вкладки ngx:

<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>

Я хотел бы знать в шаблоне, какая вкладка выбрана, чтобы я мог показать/скрыть правильные кнопки.


angular ngx-bootstrap
person gog    schedule 04.10.2017    source источник

Ответы (2)


arrow_upward
10
arrow_downward

Если вы будете следовать документации 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;
}

Для дальнейшего:

person Dilushika Weerawardhana    schedule 13.09.2018

arrow_upward
6
arrow_downward

Вы можете получить TabsetComponent через ViewChild, а затем посмотреть его свойство tabs, там вы найдете все вкладки, и тогда будет легко узнать, какая из них активна. Вот пример (откройте консоль, чтобы увидеть результат) https://stackblitz.com/edit/angular-wm4ywp?file=app%2Fapp.component.ts

person IlyaSurmay    schedule 05.10.2017
comment
Благодарность! полезно для получения активной вкладки, а также для программной установки активной вкладки. - person Anant Dhas; 07.12.2020