கோண 8 இல் NgStyle பற்றி நீங்கள் தெரிந்து கொள்ள வேண்டிய அனைத்தும்



இந்த கட்டுரை பல்வேறு எடுத்துக்காட்டுகளுடன் கோண 8 இல் உள்ள NgStyle பற்றிய விரிவான மற்றும் விரிவான புரிதலை உங்களுக்கு வழங்கும்.

நீங்கள் இப்போது சில காலமாக குறியீட்டுத் துறையில் இருந்தால், டைனமிக் மாறுபாடுகளை வளர்ப்பது வலை பயன்பாடுகளில் ஒரு பணியாக இருக்கும் என்பதை நீங்கள் ஏற்கனவே அறிந்திருக்கலாம். உங்கள் சிக்கலான அளவைப் பயன்படுத்த நீங்கள் தேர்வு செய்யும் நிரலாக்க தளத்தைப் பொறுத்து மாறுபடும், ஆனால் அதிர்ஷ்டவசமாக இந்த சாதனையை கோண 8 மற்றும் கோணலின் முந்தைய பதிப்புகளிலும் எளிதாக அடைய முடியும். இந்த கட்டுரையில், அகுலர் 8 இல் ngstyle பற்றி விவாதிப்போம்.

கோண 8 இல் வார்ப்புரு சொத்து தொடரியல்

கோண 8 உடன் வரும் அனைத்து செயல்பாடுகளையும் தொகுதிகளையும் ஆராய்வதற்கான ஆழத்திற்குச் செல்வதற்கு முன், முதலில் கோண 8 இல் உள்ள சொத்து தொடரியல் மற்றும் தூய ஜாவாவில் வண்ணச் சொத்தின் நிறத்தை எவ்வாறு மாற்றலாம் என்பதைப் பார்ப்போம்.





ngstyle-in-angular

myDiv = document.getElementById ('my-div') myDiv.style.color = 'ஆரஞ்சு' // அதன் பண்புகள் வழியாக div ஐ புதுப்பிக்கட்டும்

உள்ளமைக்கப்பட்ட நூலகங்கள் மற்றும் பிற தொகுதிகளைப் பயன்படுத்துவதன் மூலம் கோண 8 இல் இதே பணியைச் செய்வோம்.



சொத்து தொடரியல் பயன்படுத்தி நடை, இந்த உரை ஆரஞ்சு

தொடரியல் {சொத்து use ஐப் பயன்படுத்தி எந்தவொரு குறியீட்டையும் திறமையாக அடைந்து, அதில் உடனடியாக மாற்றங்களைச் செய்யுங்கள்.

மேலே உள்ள எடுத்துக்காட்டில், நாங்கள் செய்தவை நேரடியாக div உறுப்பு பாணி சொத்தை அணுகும். DOM பொருள் மற்றும் பண்புக்கூறுகளில் உள்ள பண்புகளுடன் ஒப்பிடுகையில், இது வேறுபட்டது.

உள்ளமைக்கப்பட்ட கோண 8 பண்புகளைப் பயன்படுத்தி, நாம் விரும்பும் எந்தவொரு வகுப்பிலும் CSS கூறுகளைச் சேர்க்கலாம். இதை நன்கு புரிந்துகொள்ள கீழேயுள்ள உதாரணத்தைக் காண்க.



c ++ வகை மாற்றம்
சொத்து தொடரியல் பயன்படுத்தி CSS வகுப்பு, இந்த உரை நீலமானது

கோண 8 இல் NgClass மற்றும் NgStyle

இது கோண 8 இல் ngSyntax மற்றும் ngClass இரண்டிலும் கட்டமைக்கப்பட்டுள்ளது, மேலும் இவை பல்வேறு நோக்கங்களுக்கு ஏற்ப பயன்படுத்தப்படலாம். ஒரு வழியில் உள்ளமைக்கப்பட்ட தொகுதிகள் மற்றவர்களை விட மிகவும் சிக்கலான சரங்களுக்கு மாற்றங்களைச் செயல்படுத்த சர்க்கரையை வழங்குகின்றன. கோண 8 இல் ngStyle க்கான தொடரியல் பற்றி பார்ப்போம்.

ngStyle ஐப் பயன்படுத்தி நடை

மேலேயுள்ள எடுத்துக்காட்டில், எங்கள் வகுப்பில் உள்ள பல கூறுகளின் இயக்கவியலை மாற்ற கோணத்தில் ngStyle ஐப் பயன்படுத்தியுள்ளோம், அதே நேரத்தில் பல குழுக்கள் ஒன்றாக சேர்ந்து பயனரின் தேவைக்கேற்ப வகுப்பைத் தனிப்பயனாக்க வசதியாக இருக்கும்.

மேற்கண்ட உதாரணத்தின் தொடர்ச்சி.

ngStyle + ஐப் பயன்படுத்தி நடை -

NgStyle பற்றி இப்போது உங்களுக்குத் தெரியும், ngStyle இன் சில கூறுகளைப் பார்ப்போம்.

ஹாஷ்செட் ஜாவா என்றால் என்ன
வகுப்புகளின் வரிசை வகுப்புகளின் பொருள் வகுப்புகளின் பொருள்

ngClass கோணத்தில் பல வழிகளில் எங்கள் குறியீட்டில் மாற்றங்களைச் செய்ய அனுமதிக்கிறது, இதனால் ngStyle ஐப் போலவே மாறும் மாற்றங்களை ஒரு நொடியில் செயல்படுத்த முடியும்.

இரண்டையும் ஒன்றாகச் செயல்படுத்த, கீழேயுள்ள எடுத்துக்காட்டைப் பாருங்கள்.

'@ கோண / கோர்' from உபகரணத்திலிருந்து {உபகரணத்தை import இறக்குமதி செய்க ({தேர்வாளர்: 'எனது பயன்பாடு', வார்ப்புரு: './app.component.html', styleUrls: ['./app.component.css'] ஏற்றுமதி வகுப்பு AppComponent {color = 'இளஞ்சிவப்பு' அளவு = 16 displayText = 'show-class' புலப்படும் = உண்மையான கட்டமைப்பாளர் () {} மாற்று () {this.visible =! this.visible this.displayText = this.visible? 'show-class': 'மறை-வகுப்பு'}}

கோண 8 இல் NgClick

இப்போது நீங்கள் ngClass மற்றும் ngStyle இரண்டின் அடிப்படை அம்சங்களையும், கோண 8 இயங்குதளத்தில் இரண்டையும் பயன்படுத்தி எதை அடைய முடியும் என்பதையும் நீங்கள் அறிந்திருக்கிறீர்கள், ngClick இன் பயன்பாட்டை ஆராய்வோம்.

NgClick என்றால் என்ன?

ஒரு குறிப்பிட்ட நிகழ்வில் நீங்கள் ஒரு நிரலின் பல கூறுகளை ஒன்றிணைக்க வேண்டும் என்றால், ஒரு பணியை அடைய முடியும் என்றால், நீங்கள் ngClick ஐப் பயன்படுத்த வேண்டும்.

 

மேலே உள்ளவை AngularJS இல் ngClick எவ்வாறு பயன்படுத்தப்படுகிறது என்பதற்கு ஒரு எடுத்துக்காட்டு. Angular8 க்கு வரும்போது, ​​அதே தொகுதி இல்லை, இதனால் ஒருவர் பின்வருவனவற்றைப் பயன்படுத்த வேண்டும்.

 

மேலே உள்ள தொடரியல் Angular8 இல் நிகழ்வு பிணைப்பை எளிதாக்க பயன்படுகிறது, இதில் நாம் முதலில் அடைப்புக்குறிக்குள் இலக்கு நிகழ்வின் பெயரை வரையறுக்கிறோம், பின்னர் மேற்கோள்களைச் சேர்த்து ஒரு ஆபரேட்டரை சமன் செய்வதன் மூலம் ஒரு டெம்ப்ளேட் அறிக்கையை உள்ளடக்குகிறோம். இந்த படிகள் முடிந்ததும், Angular8 இந்த நிகழ்விற்கான நிகழ்வு கையாளுதலை அமைக்கிறது மற்றும் தூண்டப்படும் போதெல்லாம், இந்த நிகழ்வு செயல்படுத்தப்படும்.

Angular8 என்பது மிகவும் பிரபலமான நிரலாக்க மொழிகளில் ஒன்றாகும், ஆனால் இது மிகவும் ஆற்றல் வாய்ந்த ஒன்றாகும், அதன் பரந்த அம்சங்களுக்கு நன்றி. இதன் மூலம், கோணத்தில் NgStyle குறித்த இந்த கட்டுரையின் முடிவுக்கு வருகிறோம். இவை எவ்வாறு செயல்படுகின்றன என்பதைப் பற்றிய புரிதல் உங்களுக்கு கிடைத்தது என்று நம்புகிறேன்.

பாருங்கள் வழங்கியவர் எடுரேகா. கோணல் என்பது ஜாவாஸ்கிரிப்ட் கட்டமைப்பாகும், இது அளவிடக்கூடிய, நிறுவன மற்றும் செயல்திறன் கிளையன்ட் பக்க வலை பயன்பாடுகளை உருவாக்க பயன்படுகிறது. கோண கட்டமைப்பின் தத்தெடுப்பு அதிகமாக இருப்பதால், பயன்பாட்டின் செயல்திறன் மேலாண்மை சமூகத்தால் இயக்கப்படுகிறது, இது மறைமுகமாக சிறந்த வேலை வாய்ப்புகளை செலுத்துகிறது. நிறுவன பயன்பாட்டு மேம்பாட்டைச் சுற்றியுள்ள இந்த புதிய கருத்துகளை உள்ளடக்குவதை கோண சான்றிதழ் பயிற்சி நோக்கமாகக் கொண்டுள்ளது.