Angular2 - 如何從DOM中刪除元素並重新聚焦添加新元素時放置焦點

Question

我正在使用*ngIf語句來打開和關閉手風琴元素中的面板。對於輔助功能要求，當一個面板關閉時（通過按繼續按鈕移動到下一個面板），下一個面板打開時，我需要重點放在<legend>上，以宣告下一個面板的標題。屏幕閱讀器（NVDA）確實讀取了文本，但在它讀取之前，它讀取了我不期望的四行。 （替換網站標題與網站的名稱），它讀取關閉：

• 網站標題 - Mozilla Firefox瀏覽器
• 未知
• 網站標題 - Mozilla Firefox瀏覽器
• 網站標題 - 文件號

然後它終於讀取下一節的標題。它這樣做的原因是因爲我有一些正在打開/關閉面板的angular2摺疊/展開動畫。當動畫正在發生時，它無法集中到下一個面板的<legend>，並且由於延遲，它讀取了4行不需要的文本。

我能想到的唯一解決方案就像是面板崩潰時的情景我將焦點放在屏幕外的空白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(); 
    }); 

}