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)