אם היית בענף הקידוד כבר זמן מה, אתה בטח כבר יודע שפיתוח וריאציות דינמיות יכול להיות משימה לא קטנה ביישומי אינטרנט. בהתאם לפלטפורמת התכנות אתה בוחר להשתמש ברמת המורכבות שלך נוטה להשתנות, אך למרבה המזל ניתן להשיג את הישג זה בקלות גם ב- Angular 8 ובחלק מהגרסאות הקודמות של Angular. במאמר זה נדון ב- ngstyle ב agular 8.
תחביר מאפייני תבנית בזווית 8
לפני שנלך לעומק חקר כל הפונקציות והמודולים שמגיעים עם Angular 8, בואו נראה תחילה את תחביר המאפיינים ב- Angular 8 וכיצד נוכל לשנות את הצבע של מאפיין צבע ב- Java טהור.
תן ל- myDiv = document.getElementById ('my-div') myDiv.style.color = 'orange' // עדכון ה- div באמצעות המאפיינים שלוהבה נעשה את אותה משימה ב- Angular 8 על ידי שימוש בספריות המובנות, כמו גם במודולים אחרים.
בסגנון באמצעות תחביר של מאפיין, הטקסט הזה כתום
השתמש בתחביר {property} והשג ביעילות כל קוד ובצע בו שינויים כמעט באופן מיידי.
בדוגמא לעיל, מה שעשינו ניגש ישירות למאפיין סגנון div element. בהשוואה למאפיינים של אובייקט DOM ותכונה, זה שונה.
באמצעות המאפיינים המובנים של Angular 8 נוכל להוסיף את אלמנטים ה- CSS לכל מחלקה שבחרנו. עיין בדוגמה למטה כדי להבין זאת טוב יותר.
מחלקת CSS המשתמשת בתחביר המאפיינים, הטקסט הזה הוא כחול
NgClass ו- NgStyle בזווית 8
הוא מובנה עם ngSyntax ו- ngClass ב- Angular 8 ואלה יכולים לשמש למטרות שונות. באופן שהמודולים המובנים מספקים סוכר ליישום שינויים בחוטים מורכבים יותר מאחרים. בואו נסתכל על התחביר של ngStyle בזווית 8.
סגנון באמצעות ngStyle
בדוגמה שלעיל השתמשנו ב- ngStyle ב- Angular כדי לשנות את הדינמיקה של מספר אלמנטים בכיתה שלנו, בעוד שבאותה קבוצה כמה אלמנטים יחד על מנת להקל על המשתמש להתאים אישית את הכיתה בהתאם לצורך שלו.
המשך הדוגמא לעיל.
הצהרת goto c ++
סגנון באמצעות ngStyle + -
עכשיו שאתה יודע על ngStyle, בואו נסתכל על כמה אלמנטים של ngStyle.
מערך מחלקות מחרוזת מחלקות אובייקט מחלקות
ngClass בזוויתי מאפשר לנו גם לבצע שינויים בקוד שלנו בשפע של דרכים, כך שניתן יהיה ליישם שינויים דינמיים בזריזות, ממש כמו ngStyle.
קווי דמיון בין java ל- javascript
התבונן בדוגמה למטה כדי לראות את שניהם יחד בפעולה.
ייבא את {Component} מ- '@ angular / core' @Component ({בורר: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) מחלקת ייצוא AppComponent {color = 'pink' size = 16 displayText = 'show-class' גלוי = קונסטרוקטור אמיתי () {} החלף () {this.visible =! this.visible this.displayText = this.visible? 'show-class': 'hide-class'}}לחץ על זווית 8
עכשיו שאתה יודע את התכונות הבסיסיות של ngClass ו- ngStyle ומה ניתן להשיג באמצעות שתיהן או שתיהן בפלטפורמה Angular 8, הבה נבחן את השימוש ב- ngClick.
מה זה ngClick?
אם באירוע מסוים עליך לאגד מספר אלמנטים של תוכנית, כך שניתן יהיה להשיג משימה אחת, אז עליך להשתמש ב- ngClick.
האמור לעיל הוא דוגמה לאופן השימוש ב- ngClick ב- AngularJS. כשמדובר ב- Angular8, אותו מודול לא קיים, ולכן צריך לעשות שימוש בדברים הבאים.
התחביר שלעיל משמש להקלת קשירת אירועים ב- Angular8, כאשר אנו מגדירים תחילה את שם אירוע היעד יחד עם סוגריים ואז כוללים הצהרת תבנית על ידי הכללת ציטוטים כמו גם אופרטור שווה. לאחר סיום שלבים אלה, Angular8 מגדיר מטפל אירועים לאירוע זה ובכל פעם שהוא מופעל, אירוע זה מבוצע.
Angular8 היא לא רק אחת משפות התכנות הפופולריות ביותר שיש, אלא שהיא גם אחת הדינמיות ביותר, הודות למגוון התכונות הרחב שלה. עם זאת, אנו מגיעים לסוף מאמר זה על NgStyle בזוויתית. אני מקווה שקיבלתם הבנה כיצד פועלים אלה.
לבדוק את מאת אדוריקה. Angular היא מסגרת JavaScript המשמשת ליצירת יישומי אינטרנט ניתנים להרחבה, ארגונית וביצועים בצד הלקוח. עם אימוץ מסגרת זוויתית גבוהה, ניהול הביצועים של היישום מונע בקהילה בעקיפין ומניע הזדמנויות עבודה טובות יותר. אימון ההסמכה הזוויתי נועד לכסות את כל המושגים החדשים הללו סביב פיתוח יישומים ארגוניים.