Question

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

<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个静态标签。

选项卡未激活时停止触发取消选择（）

1 个答案: