Определить щелчок по активной в данный момент вкладке.(Угловой вкладка материала) - PullRequest
Новая
       5

Определить щелчок по активной в данный момент вкладке.(Угловой вкладка материала)

0 голосов
/ 28 мая 2018

У меня есть группа вкладок с различными вкладками.Я хочу обнаружить щелчок по заголовку активной вкладки.

Например.У меня есть 2 вкладки - вкладка компании и вкладка пользователей , а внутри каждой вкладки есть 2 представления - представление списка и подробное представление.Сначала я хочу загрузить список и, нажав на элемент, перейти к подробному представлению соответствующего элемента.Но если я снова нажму на заголовок вкладки, я хочу снова перейти к просмотру списка.

Существуют такие события, как (selectedTabChange), которые определяют, изменилась ли вкладка, но, поскольку я нахожусь внутри той же вкладки, она не генерируется.Любая помощь .?

<mat-tab-group class="theme-specific-tabs account-page-tabs" [(selectedIndex)]="selectedTab"  (selectedIndexChange)="accountTabOnIndexChange($event)">

Ответы [ 2 ]

0 голосов
/ 27 июля 2018 

onTabGroupClicked(event) {
    if (this.prevTabIndex === this.activeTabIndex) {
      // current active tab clicked!
    } else {
      // another tab clicked!
    }

    this.prevTabIndex = this.activeTabIndex;
    
  }
<mat-tab-group [(selectedIndex)]="activeTabIndex" (click)="onTabGroupClicked()">
0 голосов
/ 29 мая 2018

Это взломать, но оно должно работать.Обратите внимание, что вызов setTimeout() необходим, потому что кажется, что изменение вкладки происходит до того, как событие click попадет в наш обратный вызов, поэтому нам нужно отложить сохранение индекса выбранной вкладки до тех пор, пока событие click не завершит распространение.По этой же причине мы не можем просто проверить активный индекс вкладки из MatTab. 

<mat-tab-group (selectedIndexChange)="selectedIndexChange($event)" (click)="tabClick($event)">
  <mat-tab label="Tab 1">Content 1</mat-tab>
  <mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>


selectedTabIndex: number = 0;
selectedIndexChange(index: number) {
  setTimeout(() => this.selectedTabIndex = index);
}

tabClick(event: MouseEvent) {
  let el = event.srcElement;
  const attr = el.attributes.getNamedItem('class');
  if (attr.value.indexOf('mat-tab-label-content') >= 0) {
    el = el.parentElement;
  }
  const tabIndex = el.id.substring(el.id.length - 1);
  if (parseInt(tabIndex) === this.selectedTabIndex) {
    // active tab clicked
    console.log(tabIndex);
  }
}

Здесь он находится на стекле .

...