Ikatan Acara Angular: Menggunakan pengikatan peristiwa dalam sudut 13 – Codewithaden

Ikatan acara Angular memungkinkan kami untuk menangani penangan acara dari dalam templat komponen Anda. Misalnya, kami dapat memasang acara elemen dom asli dan Acara khusus yang Anda buat untuk dikeluarkan komponen Anda.

Mengikat peristiwa sudut

Pengikatan peristiwa di Angular akan memiliki nama acara target dalam tanda kurung di sebelah kiri tanda yang sama dan pernyataan templat yang dikutip di sisi kanan. Ini karena properti Ikatan menggunakan tanda kurung persegi, sementara Event Binding menggunakan tanda kurung.

Ketika pengguna berinteraksi dengan aplikasi dalam bentuk gerakan keyboard klik mouse, itu menghasilkan acara. Peristiwa ini perlu ditangani untuk melakukan beberapa tindakan. Di sinilah ikatan acara masuk ke dalam gambar.

Sintaksis:

(event) 

Lihat contoh berikut.

Tulis kode berikut di dalam app.component.html mengajukan.

Angular 12 Event binding

Kami telah menggunakan elemen tombol dan menambahkan acara klik ke dalamnya. Itu Onbam () Acara adalah asli di HTML tetapi, kami menggunakan sudut di sini, jadi dengan bantuan Angular, kami dapat menghapus pada Dari acara dan acara tulis di tanda kurung, yang merupakan klik.

Angular memiliki pola untuk acara DOM asli di mana ia mencari nama acara tanpa on, Jadi setiap acara DOM asli yang dinamai X, Anda akan mengikatnya dengan meninggalkan awalan. Ini karena Angular mengharapkan metode Onbam () Untuk tersedia dalam eksekusi.

Saat pengguna mengklik tombol, itu akan memanggil Onbam () fungsi. Di sini, Anda dapat memberi nama fungsinya, apa pun yang Anda inginkan. Maka itu akan mengembalikan fungsi Onbam () apa pun yang akan kembali. Jadi semua aliran akan ditransfer ke fungsi ONBAM ().

Di dalam app.component.ts file, kita perlu mendefinisikan fungsi Onbam (). Jadi mari kita lakukan.

// app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  onClick() {
    console.log('Bamm!!!');
  }
}
 

Saat pengguna mengklik tombol di dalam konsol browser, kita dapat melihat Bam !!!

Kami juga dapat menggunakan awalan di-; Ini dikenal sebagai bentuk kanonik dalam pengikatan peristiwa.


Angular 12 Event binding

Harap simpan file, dan berfungsi sama dengan yang sebelumnya.

$ Penanganan acara dan pernyataan penanganan acara

Dalam mengikat acara, kami mengikat event handler untuk acara target. Setiap kali kami melakukan beberapa operasi, acara ini akan dinaikkan.

Pengawal acara kemudian menjalankan pernyataan template. Template Handler akan memiliki penerima, beroperasi berdasarkan acara yang diterima dan kemudian merespons. Salah satu respons tersebut akan menyimpan nilai dari tampilan ke array dalam komponen.

Jika acara tersebut adalah acara DOM Element asli, maka $ acara adalah objek elemen DOM dengan properti yang berbeda seperti target dan target. Nilai.

Oke, mari kita mengerti dengan sebuah contoh.

Buat file yang dipanggil App.ts di dalam an aplikasi folder dan tulis kode berikut.

// App.ts

export class App {
  name: string;
  price: number;
}
 

Sekarang, impor file di dalam app.component.ts mengajukan.

// app.component.ts

import { Component } from '@angular/core';
import { App } from './App';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  app: App = {
    name: 'FB',
    price: 22
  };
}
 

Juga, kami telah menentukan nilai properti dari kelas aplikasi.

Sekarang, tulis kode berikut di dalam app.component.html mengajukan.

Angular 12 Event binding

Dalam contoh di atas kita dapat melihat ‘ app.name ‘Terikat ke $ event.target.Value

Itu untuk tutorial ini.

Lihat juga

Crud sudut

Peningkatan CLI Angular

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *