Handling User Interaction

Foydalanuvchi bilan o'zaro aloqani boshqarish

Foydalanuvchi bilan o'zaro aloqani boshqarish.

Foydalanuvchi bilan o'zaro aloqani boshqarish va undan foydalanish — dinamik ilovalar yaratishning muhim jihatlaridan biridir. Ushbu qo'llanmada biz oddiy foydalanuvchi o'zaro aloqasi — voqealarni boshqarishni ko'rib chiqamiz.

Voqealarni boshqarish

Elementga voqea tinglovchisini qo'shish uchun:

• Ovoz nomi ichidagi qavs ichida atribut qo'shing
• Voqea sodir bo'lganda ishlatmoqchi bo'lgan JavaScript bayonotini belgilang

<button (click)="save()">Saqlash</button>

Misol uchun, agar biz klik voqeasi sodir bo'lganda transformText funksiyasini ishga tushiradigan tugma yaratmoqchi bo'lsak, u quyidagicha ko'rinadi:

// text-transformer.component.ts
@Component({
  standalone: true,
  selector: 'text-transformer',
  template: `
    <p>{{ announcement }}</p>
    <button (click)="transformText()">Abrakadabra!</button>
  `,
})
export class TextTransformer {
  announcement = 'Yana salom, Angular!';
  transformText() {
    this.announcement = this.announcement.toUpperCase();
  }
}

Boshqa keng tarqalgan voqea tinglovchilari misollariga quyidagilar kiradi:

<input (keyup)="validateInput()" /> <input (keydown)="updateInput()" />

$event

Agar voqea obyektiga kirish kerak bo'lsa, Angular $event o'zgaruvchisini taqdim etadi, uni funksiyaga uzatishingiz mumkin:

<button (click)="createUser($event)">Yuborish</button>