Angular hodisalari

Voqealar shabloningizga foydalanuvchi harakatlariga munosabat bildirish imkonini beradi.

Voqeani bog‘lash asoslari

component usulini ishga tushirish uchun (event) bilan bog‘lang; $event - mahalliy voqea.
(click), (input) kabi keng tarqalgan DOM hodisalaridan va (keyup.enter) kabi tugma filtrlaridan foydalaning.
Tez kiritish vaqtida ishni cheklash uchun ishlov beruvchilarni bekor qiling.
Bubbling: ichki elementlardagi hodisalar yuqoriga ko‘tariladi; kerak bo‘lganda $event.stopPropagation() ni chaqiring.

<button (click)="onClick()">Click</button>
<input (input)="onInput($event)" (keyup.enter)="submit()">
<div (click)="onParentClick()">
  <button (click)="onChildClick($event)">Child</button>
</div>

Eslatma: Belgilash va interpolyatsiya qilish uchun shablonlarga qarang, xususiyat/ikki tomonlama bog‘lash uchun ma’lumotlarni bog‘lash va kontentni ko‘rsatish/yashirish uchun shartli ko‘rsatish.

Asosiy voqealar

Component holatini yangilash uchun (click) dan foydalaning.
$event.target dan kiritilgan qiymatlarni o‘qing (kerak bo‘lganda translatsiya yoki $any dan foydalaning).
Track the last key pressed via (keyup).

<button (click)="increment()">Click me</button>
<input (input)="onInput($event)" (keyup)="lastKey = $any($event).key">

Misol

Umumiy hodisalarni boshqaring va component holatini foydalanuvchi kiritishi bilan sinxronlashtiring:

Misol

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h3>Events</h3>
    <p>Count: {{ count }}</p>
    <button (click)="increment()">Click me</button>

    <div style="margin-top:12px">
      <input placeholder="Type..." (input)="onInput($event)" (keyup)="lastKey = $any($event).key">
      <p>Value: {{ value }}</p>
      <p>Last key: {{ lastKey }}</p>
    </div>
  `
})
export class App {
  count = 0;
  value = '';
  lastKey = '';

  increment() { this.count++; }
  onInput(e: Event) { this.value = (e.target as HTMLInputElement).value; }
}

bootstrapApplication(App);

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

(click)="increment()" : count ni oshirish uchun component usulini chaqiradi.
(input)="onInput($event)": Kirishning joriy matnini $event.target.value dan o‘qiydi va uni qiymatda saqlaydi.
(keyup)="lastKey = $any($event).key": Oxirgi bosilgan tugmani oxirgi kalitda saqlaydi.
Displey: {{ count }}, {{ value }} va {{ lastKey }} component maydonlarini ko‘rsatadi.

Eslatmalar:

Ishlovchilarni kichikroq tuting: Voqealar ishlov beruvchilarida minimal ishni bajaring; og‘ir ishlarni xizmatlarga topshirish.
Hodisani kiriting: $eventni tor yoki kiritmalarni o‘qishda $any($event.target) dan foydalaning.
Tarqatish/standart: kerak bo‘lganda $event.stopPropagation() / $event.preventDefault() dan foydalaning.

Hodisalarni filtrlash (keyup.enter)

Ishlovchilarni faqat ma’lum kalitlarda ishga tushirish uchun kalit taxalluslaridan foydalaning (masalan, Enter).
Filtrlangan hodisalar holatini yangilash orqali UI reaktivligini saqlang.

<input (keyup.enter)="add()" (keyup)="lastKey = $any($event).key">

Misol

Filter keyboard events with key aliases like keyup.enter:

Misol

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  styles: [`
    .toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    ul { margin-top: 10px; }
    li { line-height: 1.8; }
    input[type="text"] { padding: 6px 8px; }
  `],
  template: `
    <h3>Event Filtering (keyup.enter)</h3>

    <div class="toolbar">
      <input type="text" placeholder="Add item and press Enter"
             [value]="draft"
             (input)="draft = $any($event.target).value"
             (keyup)="lastKey = $any($event).key"
             (keyup.enter)="add()">
      <button (click)="add()">Add</button>
      <button (click)="clear()" [disabled]="items.length === 0">Clear</button>
      <span style="margin-left:8px;color:#666">Last key: {{ lastKey }}</span>
    </div>

    <ul>
      <li *ngFor="let it of items; let i = index">{{ i + 1 }}. {{ it }}</li>
    </ul>
  `
})
export class App {
  draft = '';
  lastKey = '';
  items = ['Buy milk', 'Learn Angular'];

  add() {
    const v = (this.draft || '').trim();
    if (!v) return;
    this.items = [...this.items, v];
    this.draft = '';
  }
  clear() { this.items = []; }
}

bootstrapApplication(App);

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

(keyup.enter)="add()": Faqat Enter tugmasi bosilganda ishlaydi va joriy qoralama qo‘shiladi.
[value]="draft" / (input) : Kirish elementi va draft maydonini sinxronlashtiradi.
Ro‘yxat: Yangi elementlar o‘zgarmas qo‘shiladi va *ngFor bilan ko‘rsatiladi; lastKey oxirgi bosilgan tugmani ko‘rsatadi.
Tugmalar: "Qo‘shish" va "O‘chirish" ro‘yxat holatini yangilash uchun komponent metodlarini chaqiradi.

Eslatmalar:

Kalit taxalluslaridan foydalaning: Kalit kodlarini qo‘lda tekshirish o‘rniga (keyup.enter) dan foydalaning.
O‘zgarmas yangilanishlar: O‘zgarishlarni aniqlashni bashorat qilish uchun yangi massiv havolalari (masalan, tarqalish) bilan elementlarni qo‘shing/o‘chiring.

O‘chirilgan kirish

Ortiqcha ishlamaslik uchun yangilanishlarni yozish to‘xtatilguncha kechiktiring.
Kiritilgan o‘zgarishlarni bekor qilish uchun setTimeout yoki RxJS dan foydalaning.

// Pseudo
handle: any;
onInput(e) {
  clearTimeout(handle);
  handle = setTimeout(() => doWork(e), 400);
}

Misol

Tez yozish paytida ishni kamaytirish uchun foydalanuvchi kiritishini bekor qiling:

Misol

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h3>Debounced Input</h3>
    <input type="text" placeholder="Type here" (input)="onInput($event)">
    <p>Immediate: {{ immediate }}</p>
    <p>Debounced (400ms): {{ debounced }}</p>
  `
})
export class App {
  immediate = '';
  debounced = '';
  private handle: any;

  onInput(e: Event) {
    const v = (e.target as HTMLInputElement)?.value ?? '';
    this.immediate = v;
    clearTimeout(this.handle);
    this.handle = setTimeout(() => this.debounced = v, 400);
  }
}

bootstrapApplication(App);

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

Darhol va bekor qilingan: har bir kirishda immediate yangilanishlar; debounced 400ms dan keyin yangilanadi.
onInput(e) : e.target.value ni o‘qiydi, immediate ni o‘rnatadi, kutilayotgan taymerni o‘chirib tashlaydi va debounced ni o‘rnatish uchun yangi vaqt tugashini rejalashtiradi.
Taymer tutqichi: handle kutish tugashi identifikatorini saqlaydi, shuning uchun uni keyingi bosishda o‘chirish mumkin.

Eslatmalar:

Tozalash taymerlari: eskirgan yangilanishlarni oldini olish uchun har bir kirishda kutilayotgan taymerlarni o‘chiring.
To‘g‘ri kechikish: UX ga mos keladigan bekor qilishni tanlang (masalan, 300-500ms).
Oqimlar uchun rivojlangan holatlarda RxJS ni ko‘rib chiqing.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish