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>标签是静态的，会一直存在，可以查询viewChild与 {static: true} ，这种情况下它会在更改删除之前查询元素，请参阅 stackblitz .

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

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

更好的解决方案是使用 Material 的 A11y CDK cdkTrapFocusAutoCapture , 请参阅 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 结构指令而不是管道。