web-dev-qa-db-ja.com

マットタブクリックイベント

私はangular Universal with angular material 2を使用しているので、クリックを機能させることができました（ユーザーイベントに関する限り）。タブから（クリック）属性をアタッチしてインデックスを変更し、動的データをプルすることができます。

以前はselectedIndexChangeで画像の配列を取得するgetAlbumsメソッドがありましたが、これはオプションではありませんが、別の方法はありますか？

他の唯一の方法は、タブインデックスを制御するための別のボタンを用意することです。

angularangular-material2angular-universalangular2-md-tabs
4
Fernando Ania

以下のコードでクリックイベントまたはマウスイベントを取得できます

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;
}
4
Vimalraj