Angular程序化聚焦链接无视觉效果及innerHTML内链接聚焦问题求助

我想通过代码自动聚焦一个链接，遇到以下问题：
点击按钮后，链接实际已获取焦点，但看不到视觉聚焦效果；若改成聚焦输入框则一切正常；另外如果点击按钮前焦点本来就在按钮上，链接的聚焦视觉效果就完全正常。

复现步骤 #

• 打开示例项目
• 点击按钮

预期与实际行为 #

• 预期：链接呈现视觉聚焦效果
• 实际：链接已聚焦，但无视觉效果（切换Tab键可看到真实焦点状态）

实际场景与代码 #

在Angular项目中，我需要在组件初始化时，聚焦通过innerHTML渲染的容器内的第一个链接。场景是：组件仅在message有值时渲染（父组件用*ngIf="message"控制），其div通过服务器返回的内容填充，内容包含链接，希望组件初始化时自动聚焦第一个链接。

组件代码：

@Input
message: string;

ngOnInit(): void {
  setTimeout(() => {
    document.querySelector<HTMLLinkElement>('.some-container a')?.focus();
  }, 0);
}

HTML代码：

<div #someId [innerHTML]="message" aria-live="assertive" class="some-container" role="alert">
</div>

1. 修复点击触发聚焦的视觉反馈问题 #

如果是通过按钮点击触发聚焦，需在点击事件中阻止默认行为，避免浏览器焦点行为干扰：

onButtonClick(event: MouseEvent) {
  event.preventDefault();
  document.querySelector<HTMLLinkElement>('a')?.focus();
}

2. 处理Angular动态innerHTML内容的聚焦时机 #

放弃依赖setTimeout，改用AfterViewChecked钩子监听视图更新，确保动态内容渲染完成后再聚焦：

import { Component, Input, ViewChild, ElementRef, AfterViewChecked } from '@angular/core';

@Component({
  selector: 'app-dynamic-content',
  templateUrl: './dynamic-content.component.html'
})
export class DynamicContentComponent implements AfterViewChecked {
  @Input() message: string;
  @ViewChild('someId') containerRef: ElementRef<HTMLDivElement>;
  private hasFocused = false;

  ngAfterViewChecked(): void {
    if (this.message && !this.hasFocused) {
      const link = this.containerRef.nativeElement.querySelector<HTMLLinkElement>('a');
      if (link) {
        link.focus({ preventScroll: false });
        this.hasFocused = true;
      }
    }
  }
}

3. 确保焦点样式可见 #

检查是否有CSS重置了默认焦点样式，显式设置链接的焦点样式：

.some-container a:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

内容的提问来源于stack exchange，提问作者lando