Question

我必须创建一个棱角分明的标签，在该标签中，用户必须通过url跳至该特定标签，例如localhost / helpPage＃personal或localhost / helpPage＃business

当用户在URL中提供/ personal或/ business时，我能够实现该功能，它将突出显示该特定选项卡，但是当我尝试设置焦点时。

下面的ngAfterViewChecked内部是我的代码。

如果我这样做，键盘标签的焦点移动将无法正常工作。

HTMLCode：

<div>
  <mat-tab-group class="sticky" #tabGroup animationDuration="0ms" 
    (selectedTabChange)="getTopicList($event, false)"
    [selectedIndex]="selectedIndex">
      <mat-tab label="Personal" i18n-label="@@personalFaq"></mat-tab>
      <mat-tab label="Business" i18n-label="@@businessFaq"></mat-tab>
  </mat-tab-group>

 </div>

角度组件：-

ngAfterViewChecked() {
const personalTab = this.el.nativeElement.querySelector('#mat-tab-label-0-0');
const businessTab = this.el.nativeElement.querySelector('#mat-tab-label-0-1');

if (this.customurl === 'personal') {
  personalTab.focus();
} else if (this.customurl === 'business') {
  businessTab.focus();
}

}

预期结果是所选索引应具有焦点，并且选项卡使用键盘向前/向后移动

当我使用selectedIndex移至特定选项卡时，element.focus（）无法与角形材质的mat-tab一起使用

0 个答案: