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

Question

我正在尝试弄清楚如何在<mat-tab-group>的选项卡之间循环。

我有这个HTML：

<div>
  <mat-tab-group>
    <mat-tab id="mat-tab-0" class="suman-mat-tab" label="Controls">
      <app-outer-control-panel></app-outer-control-panel>
    </mat-tab>
    <mat-tab id="mat-tab-1"  class="suman-mat-tab" label="Events List">
      <app-events-list></app-events-list>
    </mat-tab>
    <mat-tab id="mat-tab-2"  class="suman-mat-tab" label="Generated Code">
      <app-generated-code></app-generated-code>
    </mat-tab>
  </mat-tab-group>
</div>

下面是我的组件：

import {Component, OnInit, Inject} from '@angular/core';
import {ChromeDataService} from '../../shared/services/chrome-data-service';
import {Subscription, Observable} from 'rxjs';

@Component({
  templateUrl: './current-run.component.html',
  styleUrls: ['./current-run.component.scss']
})

@Inject(ChromeDataService)
export class CurrentRunComponent implements OnInit {

  keydownSub: Subscription;
  state = 0;
  total = 0;

  constructor(private data: ChromeDataService) {

  }

  ngOnDestroy() {
    this.keydownSub && this.keydownSub.unsubscribe();
  }

  ngOnInit() {

    this.keydownSub = Observable.fromEvent(document, 'keyup').subscribe((v: KeyboardEvent) => {

      if (v && v.keyCode === 37) {
        this.goLeft();
      }
      if (v && v.keyCode === 39) {
        this.goRight();
      }

    });

  }

  goLeft() {
    this.total = this.total + 2;  // note that 2 = 3-1
    this.state = this.total % 3;
    // how to set focused mat-tab here ??
  }

  goRight() {
    this.total++;
    this.state = this.total % 3;
    // how to set focused mat-tab here ??
  }

}

我只想知道，我如何才能告诉材料哪个标签是焦点？

为了使其动态化，而不是硬编码为3，我可以使用类class="suman-mat-tab"来计算元素的数量。

Answer 1

您可以在MatTabGroup上使用selectedIndex输入(通过单向绑定

<mat-tab-group [selectedIndex]="state">
  <!-- ... -->
</mat-tab-group>

顺便说一句，为了让ngOnDestroy生命周期钩子工作，您还必须实现OnDestroy接口：

export class AppComponent implements OnDestroy {
  ngOnDestroy() {
    // ...
  }
}

Stackblitz demo