发现带有 tabindex 的 HTMLElement 不会聚焦（）

Question

我有一个 HTMLElement，它是在使用 .focus() 时不会聚焦的变量中找到并设置的。由于这是一个 Angular 应用程序，我尝试使用 nativeElement 来聚焦，但找不到该元素。

可接受的答案可以使用任何一种方法，也可以使用其他方法，只要它不涉及使用额外的库，如 jQuery。

<mat-checkbox
    [ngModel]="value"
    [tabIndex]="tabIndex"
    [id]="tabbableId"
    (keydown.enter)="toggleCheckAndEmit()"
    #htCheckbox
></mat-checkbox>

export class MatCheckboxWrapperComponent {

    @ViewChild('htCheckbox', {static: true}) public htCheckbox?: ElementRef;
    
    public tabbableId: string = 'tabbable-'
    
    @Input()
    public tabIndex: number = 0;

    public toggleCheckAndEmit(): void {
        this.value = !this.value;
        this.valueChange.emit(this.value);

        const checkbox = document.getElementById(this.tabbableId);

        setTimeout(() => {
            if (this.htCheckbox && this.htCheckbox.nativeElement) {
                // this code is unreachable
                this.htCheckbox.nativeElement.focus();
            } else {
               // this.htCheckbox.nativeElement is never found :(
            }
            if (checkbox) {
                //mat-checkbox is always found BUT
                checkbox.focus();
                // document.activeElement is still <body> :( 
            }
        }, 5000);
    }
}

Answer 1

似乎对我有用。我实现了 NgAfterViewInit 到运行你的方法并重构了一点。我们可以通过 NgAfterViewInit（最早）在渲染后访问模板中的元素。然后我们将该元素引用为 HTMLElement，而不是 ElementRef。

https://stackblitz.com/edit/angular-zzf4pd?file=src%2Fapp%2Fapp.component.ts

发现带有 tabindex 的 HTMLElement 不会聚焦（）

Found HTMLElement with tabindex will not focus()

angular

angular-material

focus

tabindex

htmlelements