Angular 18 -sarja (kaksikymmentäkuusi) toteuttaa laiskat hakutoiminnot RXJS:n pohjalta

Pikku roisto · Julkaistu 28.10.2024 17.18.59

Vaatimukset: Kun teksti muuttuu, taustakäyttöliittymää tulisi kutsua hakusanoihin ja palauttamaan dataa, mutta usein käyttäjä ei ole syöttänyt avainsanoja kokonaan, ja tekstin muutostapahtuma käynnistyy useita kertoja, mikä aiheuttaa painetta back-endin käyttöliittymälle pyytää usein, ja myös front-endin usein renderöintiin kohdistuu tietty paine. Miten viivästetty hakutoiminto toteutetaan? Eli kun käyttäjä syöttää avainsanan kokonaan, kutsutaan backend-rajapintakysely.

Esityksen helpottamiseksi tässä on miljööViive yhdellä sekunnilla, renderöinnit ovat seuraavat:

HTML-sivun koodi:

Kirjautuminen näkyy.

TS-komponenttikoodi on seuraava:

Kirjautuminen näkyy.

(Loppu)

Pikku roisto · Julkaistu 15.5.2025 8.44.41

debounceTime() putkisto
DebounceTime-putkisto on sisäänrakennettu putki Angularissa, jota voidaan käyttää tapahtumien debounceamiseen. DebounceTime-putken käyttämiseksi sinun täytyy välittää debounce-aika (millisekunteina) parametrina
distinctUntilChanged()
distinctUntilChanged on operaattori, joka suodattaa pois samat arvot, jotka aktivoituvat peräkkäin havaittavassa tiedostossa. Tämä on hyödyllistä tilanteissa, joissa haluat estää Observablea ampumasta samaa arvoa useita kertoja peräkkäin.

Pikku roisto · Julkaistu 15.5.2025 9.29.33

AsyncValidatorFn validoi viiveen stabiloinnin

Kirjautuminen näkyy.

Viittaus:Hyperlinkin kirjautuminen on näkyvissä.

Pikku roisto · Julkaistu 15.5.2025 9.33.52

Pikku Julkaistu 2025-5-15 09:29
AsyncValidatorFn validoi viiveen stabiloinnin

Lähde: https://stackoverflow.com/questions/36919011/how-to-add-debounc ...

Lisäkapselointi (Ei testattu）

Esimerkki 1:

Kirjautuminen näkyy.

Esimerkki 2:

Kirjautuminen näkyy.

[Angular] Angular 18 -sarja (kaksikymmentäkuusi) toteuttaa laiskat hakutoiminnot RXJS:n pohjalta

Aiheeseen liittyvät julkaisut

Katsotut osuudet