Angular Documentation, Services

דוגמא קומפוננטת חיפוש

ניצור קומפוננטת חיפוש ללא כפתור.

הקומפוננטה מציגה תיבת טקסט שבה מכניסים את ערך החיפוש.

search.component.html

<input type="text" #txtNum (input)="onValueChange(txtNum.value)">

קודם נציג ל-console את הערך של החיפוש שמקבלים מתיבת הטקסט.

search.component.ts

onValueChange(str:string){
    console.log(str);
}

עם הקוד הזה אנחנו מחפשים כל פעם כשנכנסת אות, אנחנו רוצים לחפש רק כשיש צורך, כלומר שמפסיקה ההקלדה.

נגדיר subject שיזרוק לנו את האירוע של ההקלדה.

search.component.ts

private searchWordChange = new Subject<string>();

ngOnInit(): void{
    this.searchWordChange.subscribe(newWord => {
      console.log(newWord);
    })
}

onValueChange(str:string){   
    this.searchWordChange.next(str);
}

נשתמש ב-filter כדי להתחיל את החיפוש רק כשיש יותר מ-2 אותיות.

search.component.ts

private searchWordChange = new Subject<string>();

ngOnInit(): void {
    this.searchWordChange.pipe(
      filter((x) => x.length > 2)
    ).subscribe(newWord => {
        console.log(newWord);
    })
}

onValueChange(str:string){   
    this.searchWordChange.next(str);
}

אפשר להשתמש ב-pipe של debounceTime להתחיל את החיפוש רק כשעובר זמן ללא הקלדה.

search.component.ts

private searchWordChange = new Subject<string>();

ngOnInit(): void {
    this.searchWordChange.pipe(
      filter((x) => x.length > 2),
      debounceTime(500)
    ).subscribe(newWord => {
        console.log(newWord);
    })
}

onValueChange(str:string){   
    this.searchWordChange.next(str);
}

פעולת החיפוש היא א-סנכרונית, אז אפשר לשלב observables בתהליך. את תוצאת החיפוש נשמור לתוך פרמטר בקומפוננטה שאנחנו משתמשים בחיפוש.