Saya memiliki masalah dalam membandingkan konten dari daftar QueryList<ElementRef>. Saya suka membedakan beberapa elemen untuk membangun logika penutup untuk menu.

Saya memiliki beberapa tombol di bilah alat, tombol-tombol ini adalah tombol Bahan Sudut bertipe mat-button. Tombol-tombol tersebut ditetapkan oleh #navButton untuk memasukkannya ke dalam QueryList. Masalahnya, tipe tombol yang diklik (nav-button) dari event listener berbeda dengan tipe di QueryList. Jika saya menggunakan tombol normal alih-alih Material mat-button kode saya berjalan seperti yang diharapkan.

Apa alasan untuk memiliki tipe yang berbeda di QueryList daripada pendengar acara? Apa yang dapat saya?

Saya memposting kode saya di GitHub: https://github.com/Christoph1972/AngularMaterialHeaderTemplate

Tolong bisakah Anda melihat ke dalamnya? Baris kode yang penting ada di main-header.component.ts dan main-header.component.html

Salam Hormat Christoph

0
Christoph1972 5 April 2021, 10:19

1 menjawab

Jawaban Terbaik

Jika Anda ingin mendapatkan ElementRefs dari elemen, sediakan di bidang konfigurasi read.

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

Dalam hal ini Anda akan mendapatkan QueryList dari referensi elemen dari semua elemen yang cocok

Dan mengubah perbandingan menjadi: if (e.target === x.nativeElement.firstChild || e.target === x.nativeElement)

1
Christoph1972 5 April 2021, 08:32