这个问题可能是由于路由器切换后焦点仍停留在被隐藏元素上所导致的。为了解决这个问题,我们可以添加以下逻辑到我们的 Router-Outlet 组件:
import { Component, Renderer2, ElementRef, OnInit } from '@angular/core'; import { Router, NavigationStart } from '@angular/router';
@Component({
selector: 'app-router-outlet',
template: '
ngOnInit() {
this.router.events.subscribe((event) => {
// 获取激活路由元素
const activeEl = document.activeElement;
if (event instanceof NavigationStart && activeEl instanceof HTMLElement && activeEl.tagName === 'AG-GRID') {
// 暂停焦点更新一段时间,给旧元素时间恢复焦点
setTimeout(() => {
// 焦点移动到 body 元素上
this.renderer.selectRootElement('body').focus();
// 焦点再移回元素
activeEl.focus();
}, 100);
}
});
}
}
在这里,我们订阅了路由事件,查看现有焦点是否位于 AG-Grid 元素上。如果是,我们会暂停焦点更新一段时间,使被隐藏的元素重新出现。然后我们将焦点移动到 body 元素上,再移回原有元素上,这将触发被更新元素的焦点重新调整。
最后,我们只需在 AppComponent 中使用新的 Router-Outlet 组件即可。