防止在ng2-bootstrap选项卡上的默认选择angular2

Question

我有一组选项卡，每个选项卡列出几个项目。我想确保用户在一个标签中选择了某些内容并尝试移动到另一个标签时收到警告。所以我想要一个警告在所选标签变为活动状态之前弹出。我目前正在使用ng2-bootstrap选项卡。我想抑制select事件，并且不让新选择的选项卡在用户执行警告之前变为活动状态。

TIA！

Answer 1

可以声明自定义页眉和使用event.stopPropagation来说，拦截select事件

template.html

<tabset> 
    <tab heading='Tab 1'>Tab 1 content</tab> 
    <tab> 
    <template tabHeading> 
     <div (click)="tryToSwitch($event)"> 
     Tab 2 
     </div> 
    </template> 
    Tab 2 content 
    </tab> 
</tabset> 

component.ts

tryToSwitch(e) { 
    let result = confirm('Are you sure?'); 
    if(!result) { 
    e.stopPropagation(); 
    } 
} 

Plunker Example