监听子组件中的焦点事件 - 处理程序不捕获焦点事件

Question

我正在使用 Angular 16 - 父组件消耗子组件 - 父组件如下

parent.component.html

<app-gotoitem #initialFocusComponent (initialFocusNativeElementFocus)="focusHandler($event)"></app-gotostudent>

parent.component.ts

@ViewChildren('initialFocusComponent') initialFocusComponents: QueryList<any>;
...
focusHandler(e) {
  console.log("do something");
}
...
this.initialFocusComponents.first.setFocus();

在我的子组件（gotoitem）中

child.component.ts

@Output() initialFocusNativeElementFocus = new EventEmitter();
@ViewChild('initialFocus') initialFocus: ElementRef;
...
fromEvent(this.initialFocus.nativeElement, 'focus') //(B)
    .pipe(take(1))
    .subscribe(elem => {
    this.initialFocusNativeElementFocus.emit(); //(C) <--this doesn't get executed
});
...
public setFocus(): void {
  this.initialFocus.nativeElement.focus(); //(A)
}

但是，在子进程执行“.focus()”语句（A）之后，“focus”事件监听器（B）不会捕获“focus”事件 - 因此会出现“emit()”（ C) 永远不会被执行。

我可以看到焦点事件处理程序附加到所需的 HTML 元素（this.initialFocus.nativeElement 指向，这是一个 kendo-dropdownlist） - 但是焦点事件侦听器附加了两个事件（第一个指的是“文档”）元素 [通过 zone.js 设置]，第二个指的是 this.initialFocus.nativeElement 指向的元素） - 见下文

如果我手动删除“文档”事件处理程序并将焦点放在有问题的元素上，“焦点”处理程序将捕获该事件并执行“emit()”

通常如何处理这种情况 - 无论“文档”事件处理程序是否存在，我都需要定义的焦点事件也运行 - 或者我是否需要删除“文档”事件处理程序 - 如果是这样怎么办？

非常感谢

Answer 1

据我所知，

kendo-dropdownlist

无法接收焦点（并且不应该按照其设计）。在开发工具控制台中输入：

setInterval(() => console.log(document.activeElement), 1000);

然后聚焦所需的元素，您将看到

span

元素已聚焦。