Angular QueryList 返回的类型与来自事件侦听器的单击不同

Question

我在比较QueryList<ElementRef>列表的内容时遇到问题。 我喜欢区分一些元素来构建菜单的关闭逻辑。

我在工具栏中有一些按钮，这些按钮是 Angular mat-button 类型的材料按钮。 这些按钮由#navButton 分配以将它们放入QueryList。 问题是，来自事件侦听器的单击按钮（导航按钮）的类型与 QueryList 中的类型不同。 如果我使用普通按钮而不是 Material mat-button 我的代码按预期运行。

QueryList 中的类型与事件侦听器不同的原因是什么？ 我能做些什么？

我在 GitHub 上发布了我的代码： https://github.com/Christoph1972/AngularMaterialHeaderTemplate

请问你能看看吗？ 重要的代码行在 main-header.component.ts 和 main-header.component.html

亲切的问候克里斯托夫

Answer 1

如果要获取元素的 ElementRefs，请在read配置字段中提供它。

@ViewChildren('navButton', {read: ElementRef})
listOfNavButtons!: QueryList<ElementRef>;

在这种情况下，您将获得所有匹配元素的元素引用的 QueryList

并将比较更改为： if (e.target === x.nativeElement.firstChild || e.target === x.nativeElement)