Nitelik direktifleri

Nitelik direktifleri, DOM elemanlarının ve Angular bileşenlerinin görünümünü veya davranışını değiştirir.

Tek seferlik davranış için şablon bağlamalarını kullanın

Angular'ın şablon sözdizimi, tek bir elemanın sınıflarını, stillerini, özelliklerini ve olaylarını değiştirmeyi zaten kapsar:

• Sınıf ve stil bağlamaları CSS sınıfları ve satır içi stiller ekleyip kaldırır.
• Özellik ve nitelik bağlamaları DOM özelliklerini ve HTML niteliklerini ayarlar.
• Olay dinleyicileri kullanıcı etkileşimine yanıt verir.

Nitelik direktifleri, bu tür bir davranışı herhangi bir elemana veya bileşene uygulayabileceğiniz yeniden kullanılabilir bir birime paketlemek istediğinizde faydalıdır.

Bir nitelik direktifi oluşturma

Özel bir nitelik direktifi, @Directive() dekoratörüne sahip bir JavaScript sınıfıdır. Dekoratörün selector'ı, direktifi uygulayan niteliği tanımlar. Köşeli parantezler bunu bir nitelik seçicisi yapar, böylece direktif o niteliği taşıyan elemanlarla eşleşir. Ad çakışmalarını önlemek için, kural olarak app gibi bir ön ek kullanın:

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

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

Bir direktif, host elemanını host bağlamaları aracılığıyla bildirimsel olarak veya host elemanına bir referans aracılığıyla emir kipiyle değiştirebilir. Bu örnek ElementRef enjekte eder ve arka planı sarıya ayarlamak için elemana nativeElement özelliği üzerinden erişir:

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

@Directive({
  selector: '[appHighlight]',
})
export class HighlightDirective {
  private el = inject(ElementRef);

  constructor() {
    this.el.nativeElement.style.backgroundColor = 'yellow';
  }
}

<p app:Highlight>This is invalid</p>

Bir nitelik direktifi uygulama

Direktifi uygulamak için, seçicisini bir elemana nitelik olarak ekleyin:

<p appHighlight>Highlight me!</p>

Angular o <p> elemanı için bir HighlightDirective örneği oluşturur, elemana bir referans enjekte eder ve arka planını sarıya ayarlar.

Kullanıcı olaylarını işleme

Kullanıcı etkileşimine yanıt vermek için, host eleman olaylarını @Directive() dekoratörünün host özelliği aracılığıyla işleyici yöntemlere bağlayın. Aşağıdaki direktif, işaretçi üzerindeyken host elemanını vurgular ve işaretçi ayrıldığında vurgulamayı kaldırır:

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

@Directive({
  selector: '[appHighlight]',
  host: {
    '(mouseenter)': 'onMouseEnter()',
    '(mouseleave)': 'onMouseLeave()',
  },
})
export class HighlightDirective {
  private el = inject(ElementRef);

  onMouseEnter() {
    this.highlight('yellow');
  }

  onMouseLeave() {
    this.highlight('');
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

host özelliği, mouseenter ve mouseleave olaylarını, host elemanı üzerinde arka plan rengini ayarlayan bir highlight() yardımcısına devreden onMouseEnter() ve onMouseLeave() yöntemlerine eşler. Host olay bağlamaları hakkında daha fazla bilgi için host elemanına bağlama bölümüne bakın.

Girdi değerlerini kabul etme

Bileşenler gibi direktifler de input() fonksiyonu aracılığıyla girdi kabul eder. Tek bir bağlamanın hem direktifi uygulaması hem de ona bir değer geçirmesi için girdiye seçiciyle aynı adı verin:

appHighlight = input('');

Girdiyi bir sinyal gibi çağırarak okuyun ve hiçbir renk ayarlanmadığında varsayılana geri dönün:

onMouseEnter() {
    this.highlight(this.appHighlight() || 'red');
  }

Şablonda değeri seçiciye bağlayın. Girdi seçicinin adını paylaştığından, [appHighlight] hem direktifi uygular hem de değerini ayarlar. Burada bağlanan color, bileşen üzerindeki bir özelliktir:

<p [appHighlight]="color">Highlight me!</p>

export class AppComponent {
  color = '';
}

Bir direktif birden fazla girdi tanımlayabilir. Aşağıdaki direktif bir defaultColor girdisi ekler ve sırasıyla appHighlight, defaultColor ve son olarak red'e geri döner:

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

@Directive({
  selector: '[appHighlight]',
  host: {
    '(mouseenter)': 'onMouseEnter()',
    '(mouseleave)': 'onMouseLeave()',
  },
})
export class HighlightDirective {
  private el = inject(ElementRef);

  defaultColor = input('');

  appHighlight = input('');

  onMouseEnter() {
    this.highlight(this.appHighlight() || this.defaultColor() || 'red');
  }

  onMouseLeave() {
    this.highlight('');
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

Her iki girdiyi de aynı elemana bağlayın. defaultColor dinamik bir ifade yerine statik bir string aldığından köşeli paranteze ihtiyaç duymaz:

<p [appHighlight]="color" defaultColor="violet">Highlight me too!</p>

NgNonBindable ile Angular işlemesini devre dışı bırakma

Tarayıcıda ifade değerlendirmesini önlemek için host elemanına ngNonBindable ekleyin. ngNonBindable, şablonlardaki interpolasyonu, direktifleri ve bağlamayı devre dışı bırakır.

Aşağıdaki örnekte, {{ 1 + 1 }} ifadesi kod editörünüzdeki gibi render edilir ve 2 görüntülemez.

<p>Use ngNonBindable to stop evaluation.</p>
<p ngNonBindable>This should not evaluate: {{ 1 + 1 }}</p>

ngNonBindable'ı bir elemana uygulamak, o elemanın çocuk elemanları için bağlamayı durdurur. Ancak, ngNonBindable yine de ngNonBindable uyguladığınız eleman üzerinde direktiflerin çalışmasına izin verir. Aşağıdaki örnekte, appHighlight direktifi hala aktiftir ancak Angular {{ 1 + 1 }} ifadesini değerlendirmez.

<h3>ngNonBindable with a directive</h3>
<div ngNonBindable [appHighlight]="'yellow'">
  This should not evaluate: {{ 1 + 1 }}, but will highlight yellow.
</div>

ngNonBindable'ı bir üst elemana uygularsanız, Angular elemanın çocukları için özellik bağlama veya olay bağlama gibi her türlü interpolasyonu ve bağlamayı devre dışı bırakır.

Sırada ne var