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

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

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

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

במדריך זה נסביר את הנושא של דירקטיבות 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 כוכבים