Nitelik direktifleri

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

Bir nitelik direktifi oluşturma

Bu bölüm, ana elemanın arka plan rengini sarıya ayarlayan bir vurgulama direktifi oluşturma sürecinde size rehberlik eder.

1. Bir direktif oluşturmak için ng generate directive CLI komutunu kullanın.

   ng generate directive highlight

   CLI, src/app/highlight.directive.ts ve ilgili test dosyası src/app/highlight.directive.spec.ts'i oluşturur.

   import {Directive} from '@angular/core';
   
   @Directive({
     selector: '[appHighlight]',
   })
   export class HighlightDirective {}

   @Directive() dekoratörünün yapılandırma özelliği, direktifin CSS nitelik seçicisini, [appHighlight]'ı belirtir.

2. @angular/core'dan ElementRef ve inject'i içe aktarın. ElementRef, nativeElement özelliği aracılığıyla ana DOM elemanına doğrudan erişim sağlar.

3. appHighlight'ı uyguladığınız eleman olan ana DOM elemanına bir referans elde etmek için inject'i kullanın.

4. HighlightDirective sınıfına arka planı sarıya ayarlayan mantık ekleyin.

   highlight.directive.ts

   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

HighlightDirective'i kullanmak için, HTML şablonuna direktifi nitelik olarak içeren bir <p> elemanı ekleyin.

<p appHighlight>Highlight me!</p>

Angular, HighlightDirective sınıfının bir örneğini oluşturur; bu sınıf <p> elemanına bir referans elde etmek ve arka plan stilini sarıya ayarlamak için inject(ElementRef)'i kullanır.

Kullanıcı olaylarını işleme

Bu bölüm, kullanıcının fareyi elemanın içine veya dışına getirdiğini algılamayı ve vurgulama rengini ayarlayarak veya kaldırarak yanıt vermeyi gösterir.

1. @Directive() dekoratöründeki host özelliğini kullanarak ana olay bağlamalarını yapılandırın.

   src/app/highlight.directive.ts (decorator)

   @Directive({
     selector: '[appHighlight]',
     host: {
       '(mouseenter)': 'onMouseEnter()',
       '(mouseleave)': 'onMouseLeave()',
     },
   })

2. İki olay işleyici yöntemi ekleyin ve host özelliği aracılığıyla ana eleman olaylarını bunlara eşleyin.

   highlight.directive.ts (mouse-methods)

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

Bir nitelik direktifini barındıran DOM elemanının (bu durumda <p>) olaylarına, direktifin host özelliğinde olay dinleyicileri yapılandırarak abone olun.

Tamamlanmış direktif aşağıdaki gibidir:

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;
  }
}

İşaretçi paragraf elemanının üzerine geldiğinde arka plan rengi görünür ve işaretçi uzaklaştığında kaybolur.

Bir nitelik direktifine değer geçirme

Bu bölüm, HighlightDirective'i uygularken vurgulama rengini ayarlama sürecinde size rehberlik eder.

1. highlight.directive.ts'de @angular/core'dan input'u içe aktarın.

   highlight.directive.ts (imports)

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

2. Bir appHighlight input özelliği ekleyin.

   highlight.directive.ts

   appHighlight = input('');

   input() fonksiyonu, direktifin appHighlight özelliğini bağlama için kullanılabilir kılan meta verileri sınıfa ekler.

3. app.component.ts'de AppComponent'e bir color özelliği ekleyin.

   app.component.ts (class)

   export class AppComponent {
     color = 'yellow';
   }

4. Direktifi ve rengi aynı anda uygulamak için, appHighlight direktif seçicisi ile özellik bağlaması kullanın ve color'a eşitleyin.

   app.component.html (color)

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

   [appHighlight] nitelik bağlaması iki görevi yerine getirir:

   • Vurgulama direktifini <p> elemanına uygular
   • Direktifin vurgulama rengini bir özellik bağlaması ile ayarlar

Kullanıcı girişiyle değer ayarlama

Bu bölüm, renk seçiminizi appHighlight direktifine bağlamak için radyo düğmeleri ekleme konusunda size rehberlik eder.

1. Aşağıdaki gibi bir renk seçmek için app.component.html'e işaretleme ekleyin:

   app.component.html (v2)

   <h1>My First Attribute Directive</h1>
   
   <h2>Pick a highlight color</h2>
   <div>
     <input type="radio" name="colors" (click)="color = 'lightgreen'" />Green
     <input type="radio" name="colors" (click)="color = 'yellow'" />Yellow
     <input type="radio" name="colors" (click)="color = 'cyan'" />Cyan
   </div>
   <p [appHighlight]="color">Highlight me!</p>

2. AppComponent.color'ı başlangıç değeri olmayacak şekilde değiştirin.

   app.component.ts (class)

   export class AppComponent {
     color = '';
   }

3. highlight.directive.ts'de, onMouseEnter yöntemini önce appHighlight ile vurgulamayı deneyen ve appHighlight undefined ise red'e geri dönen şekilde düzenleyin.

   highlight.directive.ts (mouse-enter)

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

4. Kullanıcının rengi radyo düğmeleriyle seçebildiğini doğrulamak için uygulamanızı sunun.

   

İkinci bir özelliğe bağlama

Bu bölüm, geliştiricinin varsayılan rengi ayarlayabilmesi için uygulamanızı yapılandırma konusunda size rehberlik eder.

1. HighlightDirective'e defaultColor adlı ikinci bir input() özelliği ekleyin.

   highlight.directive.ts (defaultColor)

   defaultColor = input('');

2. Direktifin onMouseEnter yöntemini, önce appHighlight ile, sonra defaultColor ile vurgulamayı deneyen ve her iki özellik de undefined ise red'e geri dönen şekilde düzenleyin.

   highlight.directive.ts (mouse-enter)

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

3. AppComponent.color'a bağlanmak ve varsayılan renk olarak "violet" kullanmak için aşağıdaki HTML'i ekleyin. Bu durumda, defaultColor bağlaması köşeli parantez [] kullanmaz çünkü değer dinamik bir ifade değil statik bir string'dir.

   app.component.html (defaultColor)

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

   Bileşenlerde olduğu gibi, bir ana elemana birden fazla direktif özellik bağlaması ekleyebilirsiniz.

Varsayılan renk bağlaması yoksa varsayılan renk kırmızıdır. Kullanıcı bir renk seçtiğinde seçilen renk aktif vurgulama rengi olur.

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

Tarayıcıda ifade değerlendirmesini önlemek için ana elemana 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.