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();
    });

}