Событие клика Mat-Tab

Я использую angular universal с угловым материалом 2, и поэтому мне удалось заставить работать только клики (что касается пользовательских событий). Можно ли подключить атрибут (щелчок) на вкладке, чтобы изменить индекс и получить динамические данные.

Раньше у меня был метод getAlbums, который извлекает массив изображений в selectedIndexChange, теперь, когда это не вариант, есть ли другой способ сделать это?

Единственный другой способ — иметь отдельную кнопку для управления индексом вкладок.


person Fernando Ania    schedule 17.01.2018    source источник
comment
взгляните на следующую ссылку, она может помочь вам stackoverflow.com/questions/42059151/   -  person Ravindra Mandalapu    schedule 21.03.2018


Ответы (1)


Я могу получить событие щелчка или событие мыши с кодом ниже

HTML

<mat-tab-group disableRipple="true" [selectedIndex]="selectedPageIndex">
  <mat-tab *ngFor="let tabData of tabsData;">
    <ng-template mat-tab-label>
      <div (mousedown)="navigate($event, tabData)"> <!-- From here you can get all event and can pass data from *ngFor -->
        <mat-icon *ngIf="!!tabData.icon"> {{ tabData.icon }}</mat-icon>
        <span *ngIf="!tabData.onlyIcon"> {{ tabData.name }}</span>
      </div>
    </ng-template>
  </mat-tab>
</mat-tab-group>

Стиль

.mat-tab-label {
  padding: 0;
  height: 40px;
}
.mat-tab-label-content {
  padding: 0 8px;
}
.mat-tab-label-content > div {
  line-height: 40px;
}
person Vimalraj    schedule 15.06.2018