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

Question

I am using an *ngIf statement to switch on and off panels within an accordian element. For Accessibility requirements, when one panel closes (by pressing the continue button to move to the next) and the next one opens I need focus to land onto a <legend> that announces a title for the next panel. The screen reader (NVDA) does read the text, but before it does it reads four lines that I don't expect. (replace website title with the name of the site) It reads off:

• website title - Mozilla Firefox
• unknown
• website title - Mozilla Firefox
• website title - document

then it finally reads the title of the next section. The reason it is doing that is because I have some angular2 collapse/expand animation that is opening/closing panels. While the animation is happening, it can't focus to the next panel's <legend> and by that being delayed, it reads off the 4 lines of unwanted text.

The only solution I can think of is something like when a panel collapses I put focus on an offscreen empty div that won't read off anything and then reset the focus onto the subtitle when the animation is done, but that seems kind of hacky. Are there any other solutions out there for this problem?

Answer 1

put Queries in component

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

in class add this

 ngAfterViewInit: function() {

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

}