Question

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

TIA！

Answer 1

您可以声明自定义标头并使用event.stopPropagation来压制选择事件

<强> 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

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

1 个答案: