Wprowadzenie
W Angular 8 wiązanie zdarzeń wykorzystywane jest do obsługi zdarzeń wywoływanych bezpośrednio z DOM - zaliczamy do nich kliknięcie przycisku, ruch myszy czy zmianę wartości tekstowej. Interakcja taka powoduje wywołanie określonej metody w komponencie. W poniższym przykładzie kliknięcie przycisku spowoduje wywołanie metody BuyCar:
<button (click)="buyCar()"></button>
Przykłady
Ponownie odsyłam do artykułu z którego możecie pobrać szablon projektu (jeżeli jeszcze tego nie zrobiliście): Angular 8: property binding
Przykłady w tym wpisie będą testowane/dodawane poniżej (rozwinięty komponent):
Prześledźmy modyfikacje niezbędne do poprawnej "implementacji" przykładu wspomnianego we wprowadzeniu. W pierwszym kroku dodamy metodę w pliku event-binding.component.ts (tym razem wykorzystamy domyślną strukturę pliku TypeScript):
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-event-binding',
templateUrl: './event-binding.component.html',
styleUrls: ['./event-binding.component.css']
})
export class EventBindingComponent implements OnInit {
brand: string;
model: string;
imageUrl: string;
constructor() {
this.brand = "Audi";
this.model = "RS6";
this.imageUrl = "https://image.shutterstock.com/z/stock-photo-london-england-audi-rs-avant-performance-estate-car-parked-in-mayfair-ditrict-of-694886881.jpg";
}
ngOnInit() {
}
buyCar($event) {
console.log("Gratulacje, właśnie kupiłeś " + this.brand + " " + this.model, $event);
}
}
Po stronie szablonu HTML dodamy możliwość ‘zakupu’ auta:
<p>Komponent przeznaczony dla: event-binding</p>
<!-- PropertyBinding -->
<img [src]="imageUrl" style="width:80%;margin-left:auto;margin-right:auto;display: block" />
<!-- Event Binding -->
<button (click)="buyCar($event)" style="width:150px;display:block;margin-left:auto;margin-right:auto;margin-top:15px;padding:10px">Kup samochód!</button>
<!-- Komentarz: właściwość 'style' dodałem tylko do celów prezentacji - powinniśmy posługiwać się właściwością 'class' -->
Zauważyliście $event?. Jest to parametr opcjonalny, który niesie ze sobą różne właściwości dotyczące tego konkretnego zdarzenia. Całość przedstawia się w poniższy sposób:
Po kliknięciu przycisku zobaczycie stosowną informację wraz ze różnymi właściwościami zdarzenia (kliknięcie przycisku):