angular - 如何从扩展面板跳过标签顺序？

Question

我在 mat-expansion-panel 中有输入字段。按tab键时，tab顺序包括mat-expansion-panel。所以我设置了 tabindex=-1 但在按下 tab 键时仍然没有跳过 mat-expansion-panel 。

按tab键时，光标移动如下

但我想跳过 Peronal 数据扩展面板，我希望光标移动如下

tabindex=-1 不起作用。我怎样才能做到这一点？这里是stackbiz

Answer 1

设置tabindex="1"所有输入。如果您不想弄乱模板，可以使用自动执行此操作的指令：

@Directive({
  selector: 'input',
})
export class TabIndexOne {
  @HostBinding('tabindex') idx = 1;
}

示例StackBlitz

Answer 2

设置一个 templateRef 并在组件中使用 ViewChild 访问它

html

<mat-expansion-panel-header #panelHeader>

ts

@ViewChild('panelHeader', { read: ElementRef }) panelHeader: ElementRef;

然后在 AfterViewInit 钩子中（记得在你的类中实现它），tabIndex设置panelHeader如下

@Component({
  selector: 'expansion-steps-example',
  templateUrl: 'expansion-steps-example.html',
  styleUrls: ['expansion-steps-example.css'],
})
export class ExpansionStepsExample implements AfterViewInit{
  @ViewChild('panelHeader', { read: ElementRef }) panelHeader: ElementRef;
  step = 0;

  setStep(index: number) {
    this.step = index;
  }

  nextStep() {
    this.step++;
  }

  prevStep() {
    this.step--;
  }

  ngAfterViewInit(){
    this.panelHeader.nativeElement.tabIndex = -1;
  }
}