Öznitelik yönergeleriyle DOM öğelerinin ve Angular bileşenlerinin görünümünü veya davranışını değiştirin.
Öznitelik yönergesi oluşturma #
Bu bölüm, ana öğenin arka plan rengini sarı olarak ayarlayan bir vurgulama yönergesi oluşturmanızı sağlar.
- Bir yönerge oluşturmak için ng generate directive CLI komutunu kullanın.
ng generate directive highlight
CLI, src/app/highlight.directive.ts ve buna karşılık gelen src/app/highlight.directive.spec.ts test dosyasını oluşturur.
import {Directive} from '@angular/core';
@Directive({
standalone: true,
selector: '[appHighlight]',
})
export class HighlightDirective {}
@Directive() dekoratörünün yapılandırma özelliği, yönergenin CSS öznitelik seçicisi olan [appHighlight]‘ı belirtir.
- ElementRef‘i @angular/core‘dan içe aktarın. ElementRef, nativeElement özelliği aracılığıyla ana DOM öğesine doğrudan erişim sağlar.
- Ana DOM öğesine, yani appHighlight uyguladığınız öğeye bir referans eklemek için yönergenin constructor() ElementRef ekleyin.
- HighlightDirective sınıfına arka planı sarı olarak ayarlayan mantık ekleyin.
import {Directive, ElementRef} from '@angular/core';
@Directive({
standalone: true,
selector: '[appHighlight]',
})
export class HighlightDirective {
constructor(private el: ElementRef) {
this.el.nativeElement.style.backgroundColor = 'yellow';
}
}
YARARLI: Yönergeler ad alanlarını desteklemez.
<p app:Highlight>This is invalid</p>
Öznitelik yönergesi uygulama #
- HighlightDirective’i kullanmak için, HTML şablonuna yönergeyi bir nitelik olarak içeren bir
öğesi ekleyin.
<p appHighlight>Highlight me!</p>
Angular, HighlightDirective sınıfının bir örneğini oluşturur ve <p> öğesinin arka plan stilini sarı olarak ayarlayan yönergenin kurucusuna <p> öğesine bir referans enjekte eder.
Kullanıcı olaylarını işleme #
Bu bölümde, bir kullanıcı öğenin içine veya dışına fareyle girdiğinde bunu nasıl algılayacağı ve vurgu rengini ayarlayarak veya temizleyerek nasıl yanıt vereceği gösterilmektedir.
- HostListener‘ı ‘@angular/core’dan içe aktarın.
import {Directive, ElementRef, HostListener} from '@angular/core';
- Her biri @HostListener() dekoratörüne sahip, fare girdiğinde veya çıktığında yanıt veren iki olay işleyici ekleyin.
@HostListener('mouseenter') onMouseEnter() {
this.highlight('yellow');
}
@HostListener('mouseleave') onMouseLeave() {
this.highlight('');
}
private highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
Bu örnekte <p> olan bir nitelik yönergesini barındıran DOM öğesinin olaylarına @HostListener() dekoratörü ile abone olun.
YARDIMCI: İşleyiciler, ana DOM öğesi el üzerindeki rengi ayarlayan highlight() adlı bir yardımcı yönteme temsilci gönderir.
Yönergenin tamamı aşağıdaki gibidir:
import {Directive, ElementRef, HostListener} from '@angular/core';
import {Input} from '@angular/core';
@Directive({
standalone: true,
selector: '[appHighlight]',
})
export class HighlightDirective {
constructor(private el: ElementRef) {}
@HostListener('mouseenter') onMouseEnter() {
this.highlight('yellow');
}
@HostListener('mouseleave') onMouseLeave() {
this.highlight('');
}
private highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
}
İşaretçi paragraf öğesinin üzerine geldiğinde arka plan rengi görünür ve işaretçi dışarı çıktığında kaybolur.
Değerleri bir öznitelik yönergesine geçirme #
Bu bölüm, HighlightDirective‘i uygularken vurgu rengini ayarlama konusunda size yol gösterir.
- highlight.directive.ts içinde, @angular/core öğesinden Input öğesini içe aktarın
import {Directive, ElementRef, HostListener, Input} from '@angular/core';
- Bir appHighlight @Input() özelliği ekleyin.
@Input() appHighlight = '';
@Input() dekoratörü, yönergenin appHighlight özelliğini bağlama için kullanılabilir hale getiren meta verileri sınıfa ekler.
- app.component.ts dosyasında, AppComponent öğesine bir renk özelliği ekleyin.
export class AppComponent {
color = 'yellow';
}
- Yönergeyi ve rengi aynı anda uygulamak için, appHighlight yönerge seçicisiyle özellik bağlamayı kullanın ve bunu color öğesine eşitleyin.
<p [appHighlight]="color">Highlight me!</p>
[appHighlight] öznitelik bağı iki görevi yerine getirir:
- Vurgulama yönergesini<p> öğesine uygular.
- Yönergenin vurgu rengini bir özellik bağıyla ayarlar.
Değeri kullanıcı girdisi ile ayarlama #
Bu bölüm, renk seçiminizi appHighlight yönergesine bağlamak için radio buttons eklemeniz konusunda size rehberlik eder.
- Renk seçimi için app.component.html dosyasına aşağıdaki gibi bir işaretleme ekleyin:
<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>
- AppComponent.color öğesini başlangıç değeri olmayacak şekilde revize edin.
export class AppComponent {
color = '';
}
- highlight.directive.ts dosyasında, onMouseEnter yöntemini önce appHighlight ile vurgulamayı deneyecek ve appHighlight undefined red olacak şekilde revize edin.
@HostListener('mouseenter') onMouseEnter() {
this.highlight(this.appHighlight || 'red');
}
- Kullanıcının radyo düğmeleriyle renk seçebildiğini doğrulamak için uygulamanıza servis yapın.
İkinci ö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.
- HighlightDirective‘e defaultColor adında ikinci bir Input() özelliği ekleyin.
@Input() defaultColor = '';
- Yönergenin onMouseEnter‘ını önce appHighlight ile, sonra defaultColor ile vurgulamayı deneyecek ve her iki özellik de undefined red olacak şekilde revize edin.
@HostListener('mouseenter') onMouseEnter() {
this.highlight(this.appHighlight || this.defaultColor || 'red');
}
- AppComponent.color öğesine bağlanmak ve varsayılan renk olarak “violet” rengine geri dönmek için aşağıdaki HTML’yi ekleyin. Bu durumda, defaultColor bağlayıcısı statik olduğu için köşeli parantez [] kullanmaz.
<p [appHighlight]="color" defaultColor="violet">
Highlight me too!
</p>
Bileşenlerde olduğu gibi, bir ana öğeye birden fazla yönerge özelliği bağlayabilirsiniz.
Varsayılan renk bağlama yoksa varsayılan renk kırmızıdır. Kullanıcı bir renk seçtiğinde, seçilen renk etkin vurgu rengi olur.
NgNonBindable ile Angular işlemeyi devre dışı bırakma #
Tarayıcıda ifade değerlendirmesini önlemek için ana bilgisayar öğesine ngNonBindable ekleyin. ngNonBindable, şablonlarda enterpolasyonu, yönergeleri ve bağlamayı devre dışı bırakır.
Aşağıdaki örnekte, {{ 1 + 1 }} ifadesi kod düzenleyicinizde olduğu gibi görüntülenir ve 2 görüntülenmez.
24
<p>Use ngNonBindable to stop evaluation.</p>
25
<p ngNonBindable>This should not evaluate: {{ 1 + 1 }}</p>
Bir öğeye ngNonBindable uygulamak, o öğenin alt öğeleri için bağlamayı durdurur. Ancak ngNonBindable, ngNonBindable uyguladığınız öğe üzerinde yönergelerin çalışmasına izin verir. Aşağıdaki örnekte, appHighlight yönergesi hala etkindir ancak Angular {{ 1 + 1 }} ifadesini değerlendirmez.
27
<h3>ngNonBindable with a directive</h3>
28
<div ngNonBindable [appHighlight]="'yellow'">This should not evaluate: {{ 1 +1 }}, but will highlight yellow.
29
</div>
Bir üst öğeye ngNonBindable uygularsanız, Angular öğenin alt öğeleri için özellik bağlama veya olay bağlama gibi her türlü enterpolasyonu ve bağlamayı devre dışı bırakır.