焦点不是从角度组件的主体开始

Question

当我单击链接导航到特定页面时，如果我按 Tab 键，焦点将从浏览器元素（搜索栏）开始，而不是像视障用户期望的那样位于新页面的顶部，即使我设置了制表符索引值？ 但当我重新加载页面时它工作正常 这是我的页面组件

    @Component({
  selector: 'app-rental-contracts-page',
  template: '<router-outlet></router-outlet>',
  host: {
    class:'lc-grid__item--wrapper'

  }
})
export class RentalContractsPageComponent implements OnInit {

  constructor() { 
  }

  ngOnInit() {
  }

}

这是我的模块

const routes: Routes = [
  {
    path: '',
    component: RentalContractsPageComponent,
    children: [
      {
        path: '',
        component: RentalContractsListPageComponent,
        data: { title: "Baux" },
      },
      {
        path: 'term/:term',
        component: RentalContractsListPageComponent
      },
      {
        path: 'create',
        component: CreateRentalContractPageComponent
      },
      {
        path: 'create/:ownerId',
        component: CreateRentalContractPageComponent
      }
      ,
      {
        path: 'create/:ownerId/:partId',
        component: CreateRentalContractPageComponent
      }

    ]
  }
];


@NgModule({
  declarations: [RentalContractsPageComponent, CreateRentalContractPageComponent, RentalContractsListPageComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    TranslateModule,
    NgbModule,
    FormsModule,
    ContractsModule.forRoot(environment),
  ]
})
export class RentalContractsPageModule { }

Answer 1

加载组件时，确保要聚焦的元素上有

ViewChild

，这也可以是普通的 div 标签

当你聚焦时，tabIndex会从焦点处继续，这是我针对这个问题的解决方案！

HTML

<div #element tabindex="0">
   <!-- content located inside here -->
   ...
</div>

TS

@ViewChild('element') element: ElementRef<any>;
...

...
ngAfterViewInit() {
    if(element?.nativeElement) {
        element.nativeElement.focus();
    }
}