Вкладка «Угловой материал»: предотвращение изменения вкладки группы мат-вкладок, если форма на текущей вкладке грязная - PullRequest
Новая
       19

Вкладка «Угловой материал»: предотвращение изменения вкладки группы мат-вкладок, если форма на текущей вкладке грязная

0 голосов
/ 15 июня 2019

Я пытался предотвратить изменение вкладки на mat-tab, если форма на текущей активной вкладке грязная.

Но я не смог найти способ перехватить событие изменения вкладки. 

<mat-tab-group>

  <mat-tab label="Tab 0" >

    // Tab 0 Content

  </mat-tab>

  <mat-tab label="Tab 1"  >

    // Tab 1 Content

  </mat-tab>

  <mat-tab label="Tab 2" >

    // Tab 2 Content

  </mat-tab>

</mat-tab-group>

Несмотря на то, что есть событие selectedTabChange, мы не можем предотвратить изменение вкладки. мы можем переключать вкладку программно только после изменения вкладки.

У меня есть взлом, чтобы сделать это возможным. Просто пишите здесь, чтобы помочь, если кто-то сталкивается с тем же.

1 Ответ

1 голос
/ 15 июня 2019

Это решение просто взломать и имеет свои недостатки.Это упоминается ниже.

Шаги:

В шаблоне :

  1. Отключить все вкладки мата-tab-group <mat-tab label="Tab 0" disabled>

  2. Предоставить обработчик событий щелчка в mat-tab-group.Также установите свойство selectedIndex, используя переменную из класса компонентов.

    <mat-tab-group (click)="tabClick($event)" [selectedIndex]="selectedTabIndex">

В классе компонентов :

  1. Объявите переменную selectedTabIndex
    selectedTabIndex = 0;

  2. Создайте метод для получения индекса вкладки при условии метки вкладки. 

    getTabIndex(tabName: string): number {

switch (tabName) {
  case 'Tab 0': return 0;
  case 'Tab 1': return 1;
  case 'Tab 2': return 2;
  default: return -1; // return -1 if clicked text is not a tab label text
 }

}

    Мы можем получить текст метки табуляции из свойства события нажатия

    clickEventName.toElement.innerText

  3. Создать метод для обработки события нажатияна мат-таб-групп.

    tabClick(clickEvent: any) {

// Get the index of clicked tab using the above function
const clickedTabIndex = this.getTabIndex(clickEvent.toElement.innerText);

// if click was not on a tab label, do nothing
if (clickedTabIndex === -1) {
  return;
}

// if current tab is same as clicked tab, no need to change. 
//Otherwise check whether editing is going on and decide

if (!(this.selectedTabIndex === clickedTabIndex)) {

  if ( /*logic for form dirty check*/ ) {

    // if form is dirty, show a warning modal and don't change tab.
  }
  else {

    // if form is not dirty, change the tab
    this.selectedTabIndex = clickedTabIndex;
  }
}

    }

В моем случае содержимое каждой вкладки было в отдельных компонентах.Поэтому я использовал @ViewChild, чтобы получить к ним доступ и проверить, является ли какая-либо форма грязной или нет.

Недостатки :

  1. Поскольку этот методиспользует текст элемента, по которому щелкнули, для переключения вкладок, есть вероятность, что одна из ваших вкладок может содержать некоторый элемент с текстовым содержимым, такой же, как заголовок других вкладок.

    Так что это может вызвать изменение вкладки.Вы можете искать другие свойства в событии click, чтобы предотвратить этот сценарий, если это возможно.(Или это может решить простое добавление начального или конечного пробела в тексте элемента)

  2. Вам может потребоваться переопределить состояние css из disabled для mat-tabвыглядят естественно

Шаблон : 

<mat-tab-group  (click)="tabClick($event)" [selectedIndex]="selectedTabIndex">

  <mat-tab label="Tab 0" disabled>

    // Tab 0 Content

  </mat-tab>

  <mat-tab label="Tab 1"  disabled>

    // Tab 1 Content

  </mat-tab>

  <mat-tab label="Tab 2"  disabled>

    // Tab 2 Content

  </mat-tab>

</mat-tab-group>
...