当标签不活动时停止触发delect（）

Question

我的页面中有三个选项卡和 3 个按钮，我使用的是 ng2 bootstrap 选项卡。根据选项卡 selected 必须禁用/启用几个按钮。

<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 是静态选项卡，当这个选项卡被 selected 时，所有 3 个按钮都必须被禁用。当标签2为select ED按钮1时必须启用。当标签 3 被 selected 时，按钮 3 必须被启用。我已经在方法中编写了这些逻辑。也就是说，当 tab2 被 selected 时， select() 被调用并启用 button1。这工作正常，直到我有两个选项卡。当我添加第三个选项卡时，第三个选项卡的 select() 被调用，然后是 tab2 的 deselect() 因为 tab2 不是 selected。这会通过调用 tab1ButtonsEnable() 禁用所有按钮。

是否可以将 select() 添加到静态选项卡？？

或者如何限制 deselect () 触发，只需要调用最后一个活动选项卡的 deselect ??

Answer 1

从你的问题的措辞来看还不是很清楚，但如果你试图根据选择的选项卡 enable/disable 按钮，你可以根据以下内容做一些事情：

// 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 个静态选项卡也没有什么特别之处。

当标签不活动时停止触发delect（）

Stop firing deselect() when tab is not active

tabs

ng2-bootstrap

angular