Este artigo é um artigo espelhado de tradução automática, por favor clique aqui para ir para o artigo original.

Vista: 1385|Resposta: 3

[Angular] A série Angular 18 (vinte e seis) implementa capacidades de busca preguiçosa baseadas no RXJS

[Copiar link]
Publicado em 28/10/2024 17:18:59 | | | |
Requisitos: Quando o texto muda, a interface do back-end deve ser chamada para consultar as palavras-chave e retornar dados, mas frequentemente o usuário ainda não inseriu totalmente as palavras-chave, e o evento de mudança de texto será acionado muitas vezes, o que causará pressão na interface back-end para solicitar com frequência, e também há certa pressão sobre a renderização frequente do front-end. Como implementar a função de busca atrasada? Ou seja, quando o usuário insere completamente a palavra-chave, a consulta da interface backend é chamada.

Para facilitar a apresentação, aqui está o cenárioAtraso de um segundo, as renderizações são as seguintes:



Código da página HTML:

O código do componente TS é o seguinte:

(Fim)





Anterior:Docker MSSQL 2022 instala o serviço de busca de texto completo
Próximo:Combate prático: Linux usa firewall-cmd para gerenciar firewalls
 Senhorio| Publicado em 15/05/2025 08:44:41 |
pipeline debounceTime()
O pipeline debounceTime é um pipeline embutido no Angular que pode ser usado para debouncar eventos. Para usar o pipeline debounceTime, você precisa passar o tempo de debounce (em milissegundos) como parâmetro
distinctUntilChanged()
distinctUntilChanged é um operador que filtra os mesmos valores que são disparados consecutivamente em um Observável. Isso é útil em situações em que você quer evitar que o Observável dispare o mesmo valor várias vezes seguidas.
 Senhorio| Publicado em 15/05/2025 09:29:33 |
AsyncValidatorFn valida a estabilização de latência

Referência:O login do hiperlink está visível.
 Senhorio| Publicado em 15/05/2025 09:33:52 |
Pequena Postado em 2025-5-15 09:29
AsyncValidatorFn valida a estabilização de latência

Referência: https://stackoverflow.com/questions/36919011/how-to-add-debounc ...

Encapsulamento adicional (Não testado

Exemplo 1:

Exemplo 2:
Disclaimer:
Todo software, material de programação ou artigos publicados pela Code Farmer Network são apenas para fins de aprendizado e pesquisa; O conteúdo acima não deve ser usado para fins comerciais ou ilegais, caso contrário, os usuários terão todas as consequências. As informações deste site vêm da Internet, e disputas de direitos autorais não têm nada a ver com este site. Você deve deletar completamente o conteúdo acima do seu computador em até 24 horas após o download. Se você gosta do programa, por favor, apoie um software genuíno, compre o registro e obtenha serviços genuínos melhores. Se houver qualquer infração, por favor, entre em contato conosco por e-mail.

Mail To:help@itsvse.com