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

Architect_Programmer_Code Rede Agrícola»Arquiteto › Design front-end & web › Quadro frontal › vinculação angular de eventos/atribuição de atributos @HostListener, @HostBindin ...
Vista: 12212|Resposta: 0

[Angular] Vinculações de eventos/atributos angulares @HostListener, @HostBinding

[Copiar link]
Publicado em 26/06/2019 14:42:08 | | | |
Antes de entrarmos nos decoradores de propriedades HostListener e HostBinding, vamos dar uma olhada no elemento host.

O conceito de elemento hospedeiro se aplica tanto a instruções quanto a componentes. Para as instruções, o conceito é relativamente simples. O elemento que aplica a instrução é o elemento hospedeiro. Vamos supor que declaramos uma diretiva de Destaque (seletor: '[exeHighlight]'):

No código HTML acima, o elemento p é o elemento anfitrião. Se a diretiva for aplicada a um componente personalizado, como:

Nesse caso, o elemento personalizado contador de exes é o elemento hospedeiro.

HostListener é um decorador de imóveis que adiciona a audição de eventos aos elementos do anfitrião.

No Angular, podemos usar o decorador HostBinding para implementar a vinculação de propriedades dos elementos.

Esta diretriz demonstra como usar o decorador HostListener para ouvir eventos de cliques do usuário

Além disso, também podemos ouvir eventos gerados por objetos que não sejam o elemento hospedeiro, como janela, documento ou corpo
O alvo pode ser janela, documento ou corpo




@HostBinding() e @HostListener() são úteis ao personalizar instruções. @HostBinding() pode adicionar classes, estilos, atributos, etc. ao elemento host do comando, enquanto @HostListener() pode ouvir eventos no elemento host.

Exemplo: implemente uma fonte e cor de borda que altere a fonte e a cor da borda em tempo real enquanto você digita

Vamos falar sobre a parte principal do código acima:
(1): Nomeie nosso aplicativo de comando Rainbow
(2): Definir todas as cores possíveis que precisamos mostrar
(3): Defina e decore cor e borda Cor com @HostBinding() para estilização
(4): Use @HostListener() para ouvir o evento keydown do elemento host e atribuir cores aleatoriamente para color e borderColor

Use este comando na página:

O efeito é o seguinte:







Anterior:O princípio da verificação de assinatura digital SM2
Próximo:JS determina se existem funções e variáveis JS

Posts Relacionados
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