angular ngAfterViewInit 元素焦点不起作用

Question

加载组件时，我希望您在初始化后专注于第一个元素。我找到了一个教程，但它不适合我。

https://davidmcintosh.medium.com/auto-focusing-an-angular-input-the-easy-way-part-1-dcb1799e025f

但是如果我把它放在一个为 0 的计时器中，那么它会很好用。但是我不想用定时器。

ngAfterViewInit(): void {
    timer(0).subscribe(() => this.firstElement.nativeElement.focus());
}

为什么我需要一个值如此荒谬的计时器？

这是我的 HTML 代码：

<p class="news-title" tabindex="0" #firstElement>{{ 'news.title' | translate }}</p>
<ul class="news-list" role="list">
    <li role="listitem" tabindex="0" class="list-item">{{ 'news.item-1' | translate }}</li>
    <li role="listitem" tabindex="0" class="list-item">{{ 'news.item-2' | translate }}</li>
    <li role="listitem" tabindex="0" class="list-item">{{ 'news.item-3' | translate }}</li>
</ul>

Answer 1

它对我有用，因为你的 <p> 标签是静态的，它会一直存在，你可以用 {static: true} 查询 viewChild，在这种情况下它会查询之前的元素更改 detaction，请参阅 stackblitz。

  @ViewChild('firstElement', {read: ElementRef, static: true})
  firstElement?: ElementRef<unknown>;

  ngAfterViewInit(): void {
    (this.firstElement?.nativeElement as any).focus();
  }

更好的解决方案是使用 material 的 A11y CDK cdkTrapFocusAutoCapture, see stackblitz

<p cdkTrapFocus="false" cdkTrapFocusAutoCapture class="news-title" tabindex="0" #firstElement>{{ 'news.title' }}</p>
<ul class="news-list" role="list">
  <li role="listitem" tabindex="0" class="list-item">{{ 'news.item-1' }}</li>
  <li role="listitem" tabindex="0" class="list-item">{{ 'news.item-2' }}</li>
  <li role="listitem" tabindex="0" class="list-item">{{ 'news.item-3' }}</li>
</ul>

注：

焦点只能聚焦在可聚焦元素上
请注意是否是您的翻译管道引入了时序问题，如果您正在使用 transloco 可能会尝试使用 transloco 结构指令而不是管道。

angular ngAfterViewInit 元素焦点不起作用

angular ngAfterViewInit element focus not workin

settimeout

typescript

angular