Question

我有一个材质选项卡组件（ mat-tab-gruop ），并且我需要在 mat-tab-header 内部使用一个搜索栏，因此我添加了一个禁用项标签仅包含一个mat-tab-label，并将其放在我的搜索栏组件中。

赞：

<mat-tab-group>  
  <mat-tab disabled>
    <ng-template mat-tab-label>
      <search-bar></search-bar>
    </ng-template>
  </mat-tab>
</mat-tab-group>

我的问题是，当我按箭头键时，焦点不在其他标题上移动，而不是在字符之间移动光标。

发生这种情况的原因是，角度材料使用键盘交互功能在选项卡之间移动焦点。

我想禁用此键盘交互行为，并继续关注搜索栏。我知道我可以在将焦点丢失到另一个选项卡标题之后将焦点移回，然后使用绑定到（selectedTabChanged）并将焦点移回搜索选项卡标题。我希望焦点始终保持在搜索栏输入上，因此我将能够使用箭头在字符之间移动。

stackbiltz Example

我的代码：

<mat-tab-group [selectedIndex]="'1'">

  <mat-tab disabled>
    <ng-template mat-tab-label>
      <div>
        <mat-form-field>
          <input matInput class="search" [value]="searchText">
        </mat-form-field>
      </div>
    </ng-template>
  </mat-tab>

  <mat-tab label="tab1">
    <p>some content</p>
  </mat-tab>

  <mat-tab label="tab2">
    <p>some content</p>
  </mat-tab>

</mat-tab-group>

Answer 1

停止从输入字段传播的关键事件，以阻止它们到达选项卡小部件

<mat-form-field>
          <input matInput class="search" [value]="searchText" (keydown)="suppressKeyEvent($event)">
        </mat-form-field>

和

export class TabGroupAnimationsExample {
  suppressKeyEvent (event:any) {
    event.stopPropagation();
  }
}

https://stackblitz.com/edit/angular-xufnk7-keqvdt

只需捡起角度并且必须执行与上述类似的操作，因此，如果有人知道一种更“恼人的”方式（例如，您可以将按键抑制编写为某种导入的模块/指令吗？）， d跪着。

mat-tab-label禁用键盘交互

1 个答案: