Запретить использование по умолчанию на вкладке ng2-bootstrap выберите angular2

Question

У меня есть набор вкладок, каждая из которых содержит несколько элементов. Я хочу убедиться, что пользователь получает предупреждение, когда он выбрал некоторые вещи на одной вкладке и пытается перейти на другую. Поэтому я хочу, чтобы предупреждение появилось до того, как выбранная вкладка станет активной. В настоящее время я использую вкладки ng2-bootstrap. Я хочу подавить событие выбора и не позволить вновь выбранной вкладке стать активной, пока пользователь не сделает предупреждение.

ТИА!

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();
  }
}

Пример плунжера