תחי ישראל - אין לנו ארץ אחרת

תחי ישראל -אין לנו ארץ אחרת

דירקטיבות Attribute של Angular2

מחבר:
בתאריך:

דירקטיבות הם היחידות הבסיסיות של Angular. למעשה, גם הקומפננטות, שבהם אנו מרבים להשתמש, הם דירקטיבות שיש להם טמפלייט. במדריך אחר הראשון בסדרת האנגולר תוכלו ללמוד כיצד להשתמש בקומפננטות אנגולריות.

קיימים עוד 2 סוגי דירקטיבות:

  • דירקטיבות Attribute - משנות את את המראה וההתנהגות של אלמנטים בדף.
  • דירקטיבות מבניות - יוצרות והורסות אלמנטים של ה-HTML.

במדריך זה נסביר את הנושא של דירקטיבות Attribute.

2 סוגים של דירקטיבות של אנגולר: מבניות ו-attribute

 

דירקטיבות Attribute

דירקטיבות Attribute משנות את המראה וההתנהגות של אלמנטים ב-HTML שעליהם הם יושבות.

לדוגמה, ניתן לשנות את הקלאס של אלמנט באמצעות הוספת לוגיקה לדירקטיבה ngClass:

<div [ngClass]="{'my-class': m==1, 'my-other-class': m==2}"></div>
  • כשהמשתנה m מקבל את הערך 1 אז תן לאלמנט את הקלאס my-class.
  • כשהמשתנה m מקבל את הערך 2 אז תן לאלמנט את הקלאס my-other-class.

בדירקטיבה hidden נשתמש להסתרת אלמנטים:

<p [hidden]="isHidden">Show if isHidden is false</p>

שימו לב,הדירקטיבה hidden מאפשרת להסתיר אלמנט באמצעות CSS, אבל האלמנט עדיין יטען ל-DOM.

 

יצירת דירקטיבת Attribute משלנו

את הדירקטיבה שלנו ששמה my-highlight והיא נותנת צבע רקע לאלמנטים שעליהם היא יושבת ניצור באמצעות ה-CLI, כלי שורת הפקודות של Angualr:

> ng generate directive my-highlight

נערוך את קובץ הדירקטיבה שאותו יצר בשבילנו ה-CLI:

./app/my-highlight.directive.ts
----------------------------------------

import { Directive, ElementRef } from '@angular/core';

// Directive decorator
@Directive({
	selector: '[appMyHighlight]'
})

// Directive class
export class MyHighlightDirective {
     highlightColor: string = 'yellow';
     
     constructor(private el: ElementRef){
		this.el.nativeElement.style.backgroundColor = this.highlightColor;
	}
}
  • הדקורטור Directive מזהה את הקלאס כדיקרטיבה.
  • הסלקטור שיזהה את הדירקטיבה שלנו ב-HTML הוא appMyHighlight, ואנחנו מקיפים אותו בסוגריים מרובעים כדי שנוכל לשים אותו על האלמנט כ-attribute, כפי שנראה בהמשך.
  • באמצעות ElementRef אנחנו יכולים לגשת לאלמנטים ב-DOM, ולשנות אותם.

כדי שהדירקטיבה תעבוד חייבים לייבא אותה לאפליקציה, וזה משהו שה-CLI עשה בשבילנו כשיצרנו את הדירקטיבה:

./app/app.module.ts
----------------------------------------

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Load our custom directive
import { MyHighlightDirective } from './my-highlight.directive';

@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent, MyHighlightDirective],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule{}

אחרי שיידענו את האפליקציה על הדירקטיבה, נוכל להשתמש בה בכל קומפוננטה. כל מה שצריך זה לשים את הסלקטור על האלמנט. לדוגמה:

./app/my-component/my-component.component.html
----------------------------------------

<h1>Welcome to my component</h1>
<!--This element will be highlighted-->
<p appMyHighlight>My highlighted content</p>
<p>This content won't be highlighted</p>

בואו נעשה משהו קצת יותר מעניין עם הדירקטיבה שלנו, ונאפשר להגדיר את צבע הרקע מבחוץ. לשם כך, נעזר ב-Input שמספק לנו אנגולר, ומאפשר לנו לקבל ערכים מחוץ לדירקטיבה.

./app/my-highlight.directive.ts
----------------------------------------

import { Directive, ElementRef, Input, OnInit } from '@angular/core';

// Directive decorator
@Directive({ 
    selector: '[appMyHighlight]' 
})

// Directive class
export class MyHighlightDirective implements OnInit {
    @Input() highlightColor: string = 'yellow';

    constructor(private el: ElementRef){
	}
         ngOnInit(){
		this.el.nativeElement.style.backgroundColor = this.highlightColor;
	}
}
  • אנחנו משתמשים ב-Input כדי לאפשר את הגדרת ערך המשתנה highlightColor מחוץ לדירקטיבה.
  • נשנה את מראה האלמנט בתוך ngOnInit כי הוא פועל לאחר שהאלמנט כבר קיים. אם נשים בקונסטרקטור זה לא יעבוד.

נוסיף עכשיו את הערך של backgroundColor כ-attribute לאלמנט:

./app/my-component/my-component.component.html
----------------------------------------

<h1>Welcome to my component</h1>


<p appMyHighlight>Highlight me with the default color!</p>
<p appMyHighlight [highlightColor]="'green'">Highlight me with a different color that is set in the template!</p>
<p appMyHighlight [highlightColor]="color">Highlight me with a different color that is set in the class!</p>
<p>No highlight!</p>
  • מכיוון שהגדרנו בתוך הדירקטיבה ערך ברירת מחדל אנחנו לא חייבים להגדיר אותו על האלמנט.
  • ניתן להעביר את הערך בתור מחרוזת בתוך הטמפלייט, ואז חשוב להקיף את המחרוזת בגרשיים. כי זה לא ערך של משתנה אלא מחרוזת.
  • את המשתנה color אנחנו יכולים להגדיר בתוך קוד הקומפוננטה:

./app/my-component/my-component.component.ts
----------------------------------------

import { Component } from '@angular/core';
@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html'
})
export class MyComponentComponent {
  color:string = 'green';
}

אנחנו יכולים לעשות משהו עוד יותר מעניין ולשנות את מראה הדירקטיבה בהתאם לאירועים. לדוגמה, להחליף את צבע הרקע כשעוברים עם העכבר. לשם כך, נייבא את ה-HostListener לדירקטיבה.

./app/my-highlight.directive.ts
----------------------------------------

import { Directive, ElementRef, Input, HostListener, OnInit } from '@angular/core';
@Directive({
	selector: '[appMyHighlight]'
})
export class MyHighlightDirective implements OnInit {
	@Input() highlightColor: string = 'yellow';
	hoverColor:string = 'aqua';
	constructor(private el: ElementRef){
	}
	@HostListener('mouseenter') onMouseEnter() {
		this.highlight(this.hoverColor);
	}
	@HostListener('mouseleave') onMouseLeave() {
		this.highlight(this.highlightColor);
	}
	ngOnInit(){
		this.highlight(this.highlightColor);
	}
	private highlight(color: string) {
		this.el.nativeElement.style.backgroundColor = color;
	}
}

כשהעכבר עובר על האלמנט צבעו ישתנה לצבע שמוגדר במשתנה hoverBackground, ובכל מקרה אחר הצבע יהיה לפי הערך שהוגדר במשתנה highlightColor.

לכל מדריכי ה-Angular בעברית

 

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים

 

 

המדריכים באתר עוסקים בנושאי תכנות ופיתוח אישי. הקוד שמוצג משמש להדגמה ולצרכי לימוד. התוכן והקוד המוצגים באתר נבדקו בקפידה ונמצאו תקינים. אבל ייתכן ששימוש במערכות שונות, דוגמת דפדפן או מערכת הפעלה שונה ולאור השינויים הטכנולוגיים התכופים בעולם שבו אנו חיים יגרום לתוצאות שונות מהמצופה. בכל מקרה, אין בעל האתר נושא באחריות לכל שיבוש או שימוש לא אחראי בתכנים הלימודיים באתר.

למרות האמור לעיל, ומתוך רצון טוב, אם נתקלת בקשיים ביישום הקוד באתר מפאת מה שנראה לך כשגיאה או כחוסר עקביות נא להשאיר תגובה עם פירוט הבעיה באזור התגובות בתחתית המדריכים. זה יכול לעזור למשתמשים אחרים שנתקלו באותה בעיה ואם אני רואה שהבעיה עקרונית אני עשוי לערוך התאמה במדריך או להסיר אותו כדי להימנע מהטעיית הציבור.

שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.

המשתמש באתר צריך להיות מודע לכך שאם וכאשר הוא מפתח קוד בשביל פרויקט הוא חייב לשים לב ולהשתמש בסביבת הפיתוח המתאימה ביותר, הבטוחה ביותר, היעילה ביותר וכמובן שהוא צריך לבדוק את הקוד בהיבטים של יעילות ואבטחה. מי אמר שלהיות מפתח זו עבודה קלה ?

השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.

הוסף תגובה חדשה

 

 

ענה על השאלה הפשוטה הבאה כתנאי להוספת תגובה:

איך אומרים בעברית אינטרנט?

 

תמונת המגיב

דניאל בתאריך: 15.04.2018

בקובץ html : appMyHighlight [highlightColor]="'green'" נראה לי לא צריך את הסוגרים המרובעים ב [highlightColor] כי זה לא עובד לי עם הסוגרים

תמונת המגיב

שני בתאריך: 13.08.2018

מדריך מצוין כמו כל המדריכים שלך!!
תודה רבה!!

תמונת המגיב

עידו בתאריך: 09.11.2018

מדריך מעולה כל הכבוד !

תמונת המגיב

איילת בתאריך: 09.01.2019

ברור מתומצת ומקיף ממש- תודה רבה!

תמונת המגיב

אני בתאריך: 31.10.2019

למדתי הרבה מפה תודה!

תמונת המגיב

אליש בתאריך: 12.05.2020

עזר לי ממש תודה רבה

תמונת המגיב

רות בתאריך: 21.06.2020

אין כמוך, אני לומדת, מחכימה ועל הדרך נהנית...

תמונת המגיב

לילי בתאריך: 14.07.2020

מדריך מעולה ועוד בעברית, תודה רבה!!

תמונת המגיב

טליה בתאריך: 06.01.2021

מדריך מעולה, תודה

תמונת המגיב

בנימין בתאריך: 17.01.2021

תודה,
לא הבנתי למה השתמשת ב input@
@Input() highlightColor: string = 'yellow';

תמונת המגיב

יוסי בן הרוש בתאריך: 22.01.2021

@Input() הוא כמו שדה של טופס
שם השדה הוא highlightColor
סוג המידע בשדה הוא string
הערך ברירת המחדל הוא 'yellow'

תמונת המגיב

שלום בתאריך: 05.05.2022

המדריך מעולה מסביר בצורה פשוטה וברורה תודה רבה!