2017-02-08 4 views
0

У меня есть три вкладки и 3 кнопки на моей странице, и я использую вкладки начальной загрузки ng2. На основе выбранной вкладки несколько кнопок должны быть отключены/включены.Стоп-стрельба снимите выделение(), когда вкладка не активна

<tabset> 
    <tab heading="tab1">tab1 content</tab> 
    <tab (select)="tab2ButtonsEnable()"   (deselect)="tab1ButtonsEnable()"> 
    <template tabHeading=" tab2"> tab2 content 
    </template> 
<tab (select)="tab3ButtonsEnable()"  (deselect)="tab1ButtonsEnable()"> 
    <template tabHeading=" tab3"> tab3 content 
    </template> 
    </template> 
    </tab> 
</tabset> 

Здесь моя tab1 является статической вкладкой, и когда эта вкладка выбрана, все 3 кнопки должны быть отключены. Когда выбрана вкладка 2, кнопка 1 должна быть включена. Когда выбрана вкладка 3, кнопка 3 должна быть включена. Я написал эту логику в методах. То есть, когда tab2 выбран, вызывается select() и активирует кнопку 1. Это работало нормально, пока у меня не было двух вкладок. когда я добавил третью вкладку, вызывается select() третьей вкладки, за которой следует deelect() tab2, поскольку tab2 не выбран. Это отключает все кнопки, вызывая tab1ButtonsEnable().

Можно ли добавить вкладку select() в статику?

Или как я могу ограничить отключение() от стрельбы, вызывать отмену последней активной вкладки?

ответ

1

Это не то, что ясно из формулировки вашего вопроса, но если вы пытаетесь включить/отключить кнопки в зависимости от выбранной вкладки, вы могли бы сделать что-то на основе следующего:

// Bind button disabled property to a boolean variable for whichever tab is showing 
<button type='button' [disabled]='!showtab1'> Button 1 </button> 
<button type='button' [disabled]='!showtab2'> Button 2 </button> 
<button type='button' [disabled]='!showtab3'> Button 3 </button> 

//Bind to the tab active property, and toggle the variable when select/deselect fire 
<tab heading='tab1' 
    [active]="showtab1" 
    (select)="showtab1 = true" 
    (deselect)="showtab1 = false"> 
//tab content 
</tab> 
.. similar for tabs 2 and 3 

если я не я не вижу необходимости останавливать распространение каких-либо событий или ничего особенного в использовании 3 статических вкладок здесь.

+0

хотя это не было тем, что я имел в виду, но ваш ответ каким-то образом помог мне решить мою проблему. я удалил deselect() и добавил select() непосредственно на мою первую вкладку. Большое спасибо :) – ani

+0

не могли бы вы помочь мне получить соответствующий заголовок табуляции в методах, которые я вызываю. – ani

+0

Взаимодействие с документацией [ng2-bootrap] (http://valor-software.com/ng2-bootstrap/#/tabs#tab-directive) вы можете ссылаться на экземпляр Tab, который был выбран с помощью '$ event' на select/delect. . для вкладки 1 '(select) = onTab1Selected ($ event)' –

Смежные вопросы