Angular2 - 如何在从 DOM 中删除元素时放下焦点并重新关注添加的新元素

Question

我正在使用*ngIf 语句来打开和关闭手风琴元素中的面板。对于辅助功能要求，当一个面板关闭（通过按继续按钮移至下一个）并且下一个面板打开时，我需要将焦点放在宣布下一个面板标题的 <legend> 上。屏幕阅读器 (NVDA) 确实会阅读文本，但在阅读之前它会读取四行我没想到的内容。 （将 网站标题 替换为网站名称）它的内容如下：

• 网站标题 - Mozilla Firefox
• 未知
• 网站标题 - Mozilla Firefox
• 网站标题 - 文档

然后它最终读取下一节的标题。这样做的原因是因为我有一些打开/关闭面板的 angular2 折叠/展开动画。在动画发生时，它无法聚焦到下一个面板的<legend>，并且由于延迟，它会读取 4 行不需要的文本。

我能想到的唯一解决方案是，当面板折叠时，我将焦点放在屏幕外的空 div 上，该 div 不会读取任何内容，然后在动画完成后将焦点重置到字幕上，但这似乎很友好哈基。这个问题还有其他解决方案吗？

Answer 1

将查询放入组件

 @Component({
   queries : {
      vc : new ng.core.ViewChildren('input') // depends on what you are adding dynamically, replace that with 'input'
   }
 })

在课堂上添加这个

 ngAfterViewInit: function() {

    this.vc.changes.subscribe(elements => {
       elements.last.nativeElement.focus();
    });

}