Periksa apakah output ada pada komponen

14

Pertimbangkan komponen berikut:

@Component({
  selector: 'app-test'
  template: 'Hello!'
}}
export class TestComponent {
  @Output() readonly selectionChange = new EventEmitter<SomeTypeHere>();
}

Dengan telepon:

<app-test (selectedChange)="selectedChangeHandler($event)"></app-test>

Perhatikan bahwa saya telah menulis selectedChangealih-alih nama output yang benar selectionChange. Sudut 9 dengan bendera strictTemplatesdiaktifkan tidak membantu saya sama sekali. Gagal dalam diam. Bagian yang menarik adalah bahwa jika saya melakukan hal yang sama untuk @Input, aplikasi menangkap kesalahan dan tidak dapat dikompilasi.

Apakah ada cara untuk melempar kesalahan jika saya mencoba "mendengarkan" yang tidak ada @Output?

angular angular-directive angular9 dev_054
sumber

1

apakah ada kesalahan dengan versi Angular sebelumnya? Saya pikir itu tidak pernah menimbulkan kesalahan pada ini

Aravind

@ Tidak menolak, tidak pernah melempar kesalahan. Saya bertanya apakah itu mungkin. Terima kasih sebelumnya.

dev_054

mengapa Anda ingin melempar kesalahan? apakah ada kebutuhan khusus? Saya mencoba memahami pertanyaan Anda

Aravind

@Aravind, saya sedang mengerjakan aplikasi perusahaan dengan banyak pengembang, jadi penting untuk memiliki semacam informasi / peringatan / kesalahan. Terkadang seseorang mengubah / menghapus sebuah @Output()lib bersama, atau bahkan pada aplikasi dan lupa untuk menghapus panggilan ... dan karena kami tidak memiliki kesalahan kompilasi, seperti yang kami miliki @Input(), kami tidak dapat menemukan apa yang menyebabkan masalah tertentu (atau bahkan untuk tidak menyimpan sampah dalam kode). Tes unit dapat bermanfaat? Mungkin, tetapi pada saat itu belum memungkinkan karena waktu.

dev_054

3

Tidak ada kesalahan dilemparkan karena acara yang mengikat di sudut digunakan tidak hanya dengan @Outputs dan EventEmitters, tetapi juga untuk mendengarkan peristiwa DOM seperti click, keyup, dll Bahkan bisa digunakan untuk mendengarkan acara adat . Misalnya, jika Anda membuat dan memancarkan acara khusus di komponen turunan:

constructor (private el: ElementRef) {}
ngOnInit(): void {
    const domEvent = new CustomEvent('selectedChange', { custom: true });
    this.el.nativeElement.dispatchEvent(domEvent);
}

Kemudian di komponen induk Anda dapat menangkapnya dengan namanya:

<app-test (selectedChange)="selectedChangeHandler($event)"></app-test>

Angular menggunakan target.addEventListener (tipe, listener [, opsi]); secara internal (Anda dapat memastikannya melihat tautan di bawah), di mana typeada string.

Itu sebabnya ia tidak membuang pengecualian jika tidak menemukan yang cocok @Output.

dengarkanToElementOutputs

DefaultDomRenderer2.listen

EventManager.addEventListener

DomEventsPlugin.addEventListener

Kirill Simonov
sumber

Hei @ Kirill Simonov terima kasih atas jawaban Anda! Nah, mengambil pernyataan Anda: "Tidak ada kesalahan yang dilemparkan karena pengikatan acara di Angular digunakan tidak hanya dengan @Outputs dan EventEmitters, tetapi juga untuk mendengarkan acara DOM seperti klik, keyup, dll", mengapa kemudian jika Anda lulus sebuah inexistent @Input()(ingat bahwa Masukan memiliki karakteristik yang sama: bisa menjadi sesuatu global seperti disabled, id, dll) sudut melemparkan kesalahan? Mengapa ini berhasil @Input, tetapi tidak untuk @Output? Juga, saya mencoba menemukan cara untuk memperingatkan / melempar kesalahan jika tidak @Outputada yang berlalu.

dev_054

@ dev_054 ini karena set properti dibatasi oleh properti yang ada dari elemen DOM, direktif atau komponen, sehingga Angular dapat dengan mudah memeriksa apakah properti ini ada atau tidak. Acara, di sisi lain, terikat menggunakan addEventListener(saya akan menambahkan beberapa tautan ke jawaban saya untuk menunjukkannya). Saya pikir, itu dilakukan dengan sengaja, sehingga pengembang dapat menggunakan acara yang mengikat dengan acara khusus mereka sendiri. Saya percaya tidak ada cara untuk menonaktifkan perilaku ini pada waktu kompilasi. Meskipun beberapa IDE (seperti IntelliJ Idea) dapat menyoroti tempat-tempat tersebut dan menampilkan peringatan.

Kirill Simonov

@ dev_054 ingat bahwa Anda juga dapat menggunakan pengikatan satu arah untuk menggunakan atribut HTML[attr.any-attribute] , dalam hal ini tidak ada kesalahan yang akan terjadi.

Kirill Simonov

0

Tidak ada solusi langsung untuk masalah Anda, namun beberapa kasus dapat dicakup.

Jika Anda memiliki output apa pun yang digunakan di 100% tempat seperti clickacara tombol maka Anda dapat menjadikannya bagian dari pemilih yaitu selector: 'app-test[selectionChange]'. Anda juga dapat melakukan ini misalnya: selector: 'app-test[selectionChange]', app-test[click]'artinya clickatau selectionChangediperlukan.
Jika Anda refactoring kode dan ganti nama output yaitu selectionChangeuntuk selectedChangemaka Anda dapat menggunakan pemilih ini: selector: 'app-test:not([selectionChange])'untuk memaksa pengguna memperbarui.

kemsky
sumber

-4

Jika Anda menggunakan Kode VS, Anda dapat menginstal ekstensi ini: Layanan Bahasa Angular akan memberikan peringatan ketika metode atau properti tidak didefinisikan. Ekstensi ini berfungsi baik dengan, output dan input (dan attrs, dll ...).

srgrcp
sumber

Sampel Anda menunjukkan @Input. Sebab @Output, Layanan Bahasa Angular tidak membantu apa-apa. Beri tahu saya jika Anda membutuhkan saya untuk mengklarifikasi pertanyaan.

dev_054

Untuk @OutputAnda akan melihat pesan kesalahan yang sama.

srgrcp

Periksa apakah output ada pada komponen

Jawaban: