如何为Angular Material元素设置tabindex？

Question

我该如何在Angular Material元素上设置tabindex=-1呢？例如，如果我将其设置为mat-checkbox，在DOM中会看到以下内容：

mat-checkbox tab-index=-1
   label
      input tabindex=0

在mat-button-toggle中同样如此：位于mat-wrappera内部的按钮不会改变其标签索引。

- romanivna

---

没有可重现的示例，帮助起来很困难。你能否创建一个 StackBlitz 或其他东西供我们测试？如何提问 - Mike Tung

我认为你遇到了 XY 问题。你需要设置 tabindex 是为了实现什么目标？ - Vega

你找到解决方案了吗？ - olefrank

Answer 1

到那时就没有办法了。 您可以在此进行后续跟进： https://github.com/angular/material2/issues/12041

- Alirizia

Answer 2

如果您想绑定Angular Material元素的tabindex属性，您应该在渲染元素后分配值。

为了清晰明了，我创建了2个mat-select元素和2个要绑定到tabindex属性的属性。

第一个属性（tabindex_1）将被声明并正常分配，第二个属性（tabindex_2）将在ngAfterViewInit方法内分配。

如果您打开控制台，您将看到绑定tabindex_1的元素返回到0，但第二个元素按预期绑定。

app.component.html

<mat-form-field>
  <mat-label>Gender</mat-label>
  <mat-select [tabindex]="tabindex_1">
    <mat-option>Male</mat-option>
    <mat-option>Female</mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field>
  <mat-label>Country</mat-label>
  <mat-select [tabindex]="tabindex_2">
    <mat-option>US</mat-option>
    <mat-option>UK</mat-option>
  </mat-select>
</mat-form-field>

app.component.ts

export class AppComponent implements AfterViewInit {
  // this will be ignored
  tabindex_1 = '1';
  tabindex_2;

  ngAfterViewInit(): void {
    // this will be reflected
    this.tabindex_2 = '2';
  }
}

请查看Stackblitz上的示例

- Nimer Awad