Angular directive özelliğinin en etkili kullanım şekli parametre verebilmektir. Element’ e eklenen directive, hardcoded şekilde DOM manipülasyonları yapmamalıdır.
Daha önce https://gelistir.net/430/angular-hostlistener-ile-dom-event-leri-dinlemek/ adresinde, elementlerin mouse ile etkileşimleri sonucu oluşan event’ lerde, element’ in arkaplan rengini sarı renkte yaparak bir DOM manipülasyon gerçekleştirmiştik. Lakin bu manipülasyon tamamen hardcoded şekilde oldu. En basitinden, bu tarz bir directive’ de arkaplan rengini belirtebilmeliyiz.

Angular’ da üst bileşenden alt bileşene Input decorator vasıtası ile veri geçişi sağlanır. bknz : https://gelistir.net/411/angular-notlar/#Component

Directive oluşturmak ve genel işleyişi hakkında eksiğiniz varsa, yukarıda belirttiğim gibi, https://gelistir.net/430/angular-hostlistener-ile-dom-event-leri-dinlemek/ adresinden bilgi alabilirsiniz.

Input Decorator ile Directive’ e veri paslamak

  • Input decorator ile color ismiyle paslanan veriyi alır hale geliyoruz;

    @Input() color: string;

    Input decorator’ ü import etmeyi unutmayın. bknz:https://gelistir.net/411/angular-notlar/#AngularCore

  • HostListener decorator vasıtası ile, color değişkenini, element’ in arkaplan rengi olarak set ediyoruz;

    @HostListener('mouseenter') mouseenter(eventData: Event) {
    this.renderer.setStyle(this.elementRef.nativeElement, 'background-color', this.color);
    }
  • Directive’ in son hali;

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  @Input() color: string;

  constructor(private elementRef: ElementRef, private renderer: Renderer2) { }

  @HostListener('mouseenter') mouseenter(eventData: Event) {
    this.renderer.setStyle(this.elementRef.nativeElement, 'background-color', this.color);
  }

  @HostListener('mouseleave') mouseleave(eventData: Event) {
    this.renderer.setStyle(this.elementRef.nativeElement, 'background-color', 'transparent');
  }

}
  • Kullanımı;
    <p appHighlight color="blue"> Test </p>

Canlı Örneği;

  • Mouse ile yazının üstüne gelince arkaplan rengi değişir.
Last modified: 10 November 2019

Author

Comments

Write a Reply or Comment

Your email address will not be published.