将右/左箭头键绑定到<mat-tab-group>面板，以实现Carousel

<mat-tab-group>
  <mat-tab label="Tab 1">
    <!-- 内容1 -->
  </mat-tab>
  <mat-tab label="Tab 2">
    <!-- 内容2 -->
  </mat-tab>
  <mat-tab label="Tab 3">
    <!-- 内容3 -->
  </mat-tab>
</mat-tab-group>

import { Component, HostListener } from '@angular/core';
import { MatTabChangeEvent, MatTabGroup } from '@angular/material/tabs';

@Component({
  selector: 'app-carousel',
  templateUrl: './carousel.component.html',
  styleUrls: ['./carousel.component.css']
})
export class CarouselComponent {
  @HostListener('keydown.arrowRight', ['$event'])
  onArrowRight(event: KeyboardEvent) {
    this.carouselNext();
  }

  @HostListener('keydown.arrowLeft', ['$event'])
  onArrowLeft(event: KeyboardEvent) {
    this.carouselPrevious();
  }

  carouselNext() {
    // 实现向右切换面板的逻辑
    // 可以使用MatTabGroup组件的selectedIndex属性来切换面板
  }

  carouselPrevious() {
    // 实现向左切换面板的逻辑
    // 可以使用MatTabGroup组件的selectedIndex属性来切换面板
  }
}

carouselNext() {
  const currentIndex = this.tabGroup.selectedIndex;
  const nextIndex = currentIndex + 1 >= this.tabGroup._tabs.length ? 0 : currentIndex + 1;
  this.tabGroup.selectedIndex = nextIndex;
}

<mat-tab-group #tabGroup>
  <!-- 标签页内容 -->
</mat-tab-group>