当选项卡处于非活动状态时停止触发deselect()

Question

我的页面中有三个选项卡和三个按钮，我使用的是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()并启用button1。在我有两个标签之前，它一直工作得很好。当我添加第三个标签时，调用第三个标签的select()，然后调用tab2的deselect()，因为tab2没有被选中。这将通过调用tab1ButtonsEnable()禁用所有按钮。

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

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

Answer 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个静态标签有什么特别之处。