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

Question

我正在使用*ngIf语句来打开和关闭*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();
    });

}