Denna artikel är en spegelartikel om maskinöversättning, klicka här för att hoppa till originalartikeln.

Utsikt: 12212|Svar: 0

[Kantig] Angular event bindningar/attributbindningar @HostListener, @HostBinding

[Kopiera länk]
Publicerad på 2019-06-26 14:42:08 | | | |
Innan vi går in på HostListener- och HostBinding-fastighetsdekoratörerna, låt oss titta på värdelementet.

Begreppet värdelement gäller både instruktioner och komponenter. När det gäller instruktioner är konceptet ganska enkelt. Elementet som tillämpar instruktionen är värdelementet. Låt oss säga att vi har deklarerat ett HighlightDirective-direktiv (selector: '[exeHighlight]'):

I ovanstående HTML-kod är p-elementet värdelementet. Om direktivet tillämpas på en anpassad komponent, såsom:

I det här fallet är exe-räknarens anpassade element värdelementet.

HostListener är en fastighetsdekoratör som lägger till evenemangslyssning till värdelement.

I Angular kan vi använda HostBinding-dekoratorn för att implementera egenskapsbindning av element.

Denna direktiv visar hur man använder HostListener-dekoratören för att lyssna efter användarens klickhändelser

Dessutom kan vi också lyssna efter händelser som genereras av objekt andra än värdelementet, såsom fönster, dokument eller kropp
Målet kan vara fönster, dokument eller kropp




@HostBinding() och @HostListener() är användbara när man anpassar instruktioner. @HostBinding() kan lägga till klasser, stilar, attribut etc. till värdelementet i kommandot, medan @HostListener() kan lyssna på händelser på värdelementet.

Exempel: Implementera ett typsnitt och en kantfärg som ändrar typsnitts- och kantfärg i realtid medan du skriver

Låt oss prata om huvuddelen av koden ovan:
(1): Namnge vårt kommando appRainbow
(2): Definiera alla möjliga färger vi behöver visa
(3): Definiera och dekorera färg och kantFärg med @HostBinding() för styling
(4): Använd @HostListener() för att lyssna på keydown-händelsen för värdelementet och slumpmässigt tilldela färger till färg och borderColor

Använd detta kommando på sidan:

Effekten är följande:







Föregående:Principen för SM2:s digitala signaturverifiering
Nästa:js avgör om js-funktioner och variabler existerar
Friskrivning:
All programvara, programmeringsmaterial eller artiklar som publiceras av Code Farmer Network är endast för lärande- och forskningsändamål; Ovanstående innehåll får inte användas för kommersiella eller olagliga ändamål, annars kommer användarna att bära alla konsekvenser. Informationen på denna sida kommer från internet, och upphovsrättstvister har inget med denna sida att göra. Du måste helt radera ovanstående innehåll från din dator inom 24 timmar efter nedladdning. Om du gillar programmet, vänligen stöd äkta programvara, köp registrering och få bättre äkta tjänster. Om det finns något intrång, vänligen kontakta oss via e-post.

Mail To:help@itsvse.com