Angular'da Özel Direktifler Nasıl Oluşturulur

Angular'ın en önemli özelliklerinden biri direktiflerdir. Açısal yönergeler, DOM öğelerine davranış eklemenin bir yoludur. Angular çeşitli yerleşik yönergeler sağlar ve ayrıca bu sağlam çerçevede özel yönergeler de oluşturabilirsiniz.

Direktifler Nelerdir?

Direktifler, Angular'ın bir HTML öğesinin davranışını veya görünümünü değiştirmek için kullandığı özel kodlardır. Olay dinleyicileri eklemek, DOM'yi değiştirmek veya öğeleri göstermek veya gizlemek için yönergeleri kullanabilirsiniz.

İki tür vardır Angular'da yerleşik yönergeler, yapısal ve nitelik. Yapısal yönergeler DOM'un yapısını değiştirirken, nitelik yönergeleri bir öğenin görünümünü veya davranışını değiştirir. Direktifler, Angular bileşenlerinin işlevselliğini genişletmenin güçlü bir yoludur.

Direktiflerin Faydaları

Angular'da direktif kullanmanın faydalarından bazıları şunlardır:

• Tekrar Kullanılabilirlik: Direktifleri birden fazla bileşende kullanarak zamandan ve emekten tasarruf edebilirsiniz.
instagram viewer
• Genişletilebilirlik: Yeni işlevler eklemek ve bileşenlerinizi daha güçlü hale getirmek için yönergeleri genişletebilirsiniz.
• Esneklik: Yönergeleri kullanarak bir öğenin davranışını veya görünümünü çeşitli şekillerde değiştirebilirsiniz; bu, uygulamalarınızı oluştururken size çok fazla esneklik sağlar.

Açısal Uygulamanızı Kurma

Angular uygulamasını kurmak için, terminalinizde aşağıdaki kodu çalıştırarak Angular CLI'yi yükleyin:

npm install -g @angular/cli

Angular CLI'yi kurduktan sonra aşağıdaki komutu çalıştırarak bir Angular projesi oluşturun:

ng new custom-directives-app

Yukarıdaki komutu çalıştırmak, adında bir Angular projesi yaratacaktır. özel-direktifler-uygulama.

Özel Direktif Oluşturma

Artık bir Angular projeniz var ve özel direktiflerinizi oluşturmaya başlayabilirsiniz. Bir TypeScript dosyası oluşturun ve aşağıdakilerle süslenmiş bir sınıf tanımlayın: @Direktif dekoratör.

@Direktif dekoratör, özel direktifler oluşturmak için kullanılan bir TypeScript dekoratörüdür. Şimdi bir tane oluştur vurgulama.direktif.ts dosyadaki kaynak/uygulama dizin. Bu dosyada özel yönergeyi oluşturacaksınız vurgulamak.

Örneğin:

import { Directive } from"@angular/core";
@Directive({
 selector: "[myHighlight]",
})
exportclassHighlightDirective{
constructor() {}
}

Yukarıdaki kod bloğu içe aktarır Direktif dekoratör @açısal/çekirdek modülü. @Direktif dekoratör süslüyor Vurgu Direktifi sınıf. Bir nesneyi argüman olarak alır seçici mülk.

Bu durumda, seçici mülkiyet [myHighlight] yani bu yönergeyi şablonlarınıza aşağıdakileri ekleyerek uygulayabilirsiniz: benim Vurgularım bir öğeye öznitelik.

Yönergeyi şablonlarınızda nasıl kullanacağınıza dair bir örnek:

Some text</p>
</main>

Yönergeye Davranış Ekleme

Artık başarıyla bir direktif oluşturdunuz. Bir sonraki adım, DOM'u değiştirebilmesi için direktife bir davranış eklemektir. İhtiyacınız olacak ElementRef Bir direktife davranış eklemek için @angular/core'dan.

ElementRef'i direktifin yapıcısına enjekte edeceksiniz. ElementRef, bir görünümün içindeki yerel bir öğenin etrafındaki sarmalayıcıdır.

Bir yönergeye nasıl davranış ekleyeceğinize dair bir örnek:

import { Directive, ElementRef } from"@angular/core";
@Directive({
 selector: "[myHighlight]"
})
exportclassHighlightDirective{
constructor(private element: ElementRef) {
this.element.nativeElement.style.backgroundColor = 'lightblue';
 }
}

Bu örnekte yapıcı Vurgu Direktifi sınıfı, Angular'ın otomatik olarak enjekte ettiği bir ElementRef parametresini alır. ElementRef, temeldeki DOM öğesine erişim sağlar.

Kullanma this.element.nativeElement özelliği, yerel DOM öğesine erişirsiniz. eleman parametre. Daha sonra bileşenin arka plan rengini şu şekilde ayarlarsınız: açık mavi kullanmak stil mülk. Bu, hangi unsuru uygularsanız uygulayın, benim Vurgularım yönergesi açık mavi bir arka plana sahip olacaktır.

Direktifi işlevsel hale getirmek için, onu içe aktardığınızdan ve beyan ettiğinizden emin olun. app.module.ts dosya.

Örneğin:

import { NgModule } from'@angular/core';
import { BrowserModule } from'@angular/platform-browser';
import { AppRoutingModule } from'./app-routing.module';
import { AppComponent } from'./app.component';
import { HighlightDirective } from'./highlight.directive';
@NgModule({
 declarations: [
 AppComponent,
 HighlightDirective,
 ],
 imports: [
 BrowserModule,
 AppRoutingModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
exportclassAppModule{ }

Artık myHighlight yönergesini öğelere uygulayabilirsiniz Angular bileşenlerinizde.

Some text</p>
</main>

Yönergenin işlevsel olup olmadığını test etmek için uygulamanızı geliştirme sunucusunda çalıştırın. Bunu terminalinizde aşağıdaki komutu çalıştırarak yapabilirsiniz:

ng serve

Komutu çalıştırdıktan sonra şuraya gidin: http://localhost: 4200/ Web tarayıcınızda aşağıdaki görseldekine benzer bir arayüz göreceksiniz.

Angular yerleşik yönergeler, öğe görünümünü değiştirmek için değerleri kabul eder, ancak özel yönerge benim Vurgularım değil. Yönergeyi, şablonun arka plan rengini dinamik olarak ayarlamak için kullanacağı bir değeri kabul edecek şekilde yapılandırabilirsiniz.

Bunu yapmak için koddaki kodu değiştirin. vurgulama.direktif.ts bununla dosya:

import { Directive, ElementRef, Input } from"@angular/core";
@Directive({
 selector: "[myHighlight]"
})
exportclassHighlightDirective{
 @Input() set myHighlight(color: string) {
this.element.nativeElement.style.backgroundColor = color;
 }
constructor(private element: ElementRef) { 
 }
}

Yukarıdaki kod bloğunda, Vurgu Direktifi sınıf adı verilen bir ayarlayıcı yöntemi içerir benim Vurgularım. Bu yöntem bir renk tür dizesinin parametresi. Ayarlayıcı yöntemini şu şekilde dekore edersiniz: @Giriş dekoratör, renk değerini ana bileşenden direktife aktarmanıza olanak tanır.

Artık myHighlight yönergesine bir değer ileterek arka plan rengini belirleyebilirsiniz.

Örneğin:

'pink'>Some text</p>
</main>

Özel Yapısal Direktif Oluşturma

Önceki bölümlerde, davranışları nasıl oluşturacağınızı, ekleyeceğinizi ve özel nitelik yönergelerini şablonunuza nasıl uygulayacağınızı öğrendiniz. Öznitelik yönergeleri DOM öğelerinin görünümünü değiştirirken, yapısal yönergeler DOM'daki öğeleri ekler, kaldırır veya taşır.

Angular iki yapısal direktif sağlar, ngFor Ve ngIf. NgFor direktifi bir koleksiyondaki (dizideki) her öğe için bir şablon oluştururken, ngIf koşullu oluşturmayı yönetir.

Bu bölümde aşağıdaki gibi işlev gören özel bir yapısal yönerge oluşturacaksınız: ngIf direktif. Bunu yapmak için bir durum.direktif.ts dosya.

İçinde durum.direktif.ts dosyaya şu kodu yazın:

import { Directive, Input, TemplateRef, ViewContainerRef } from'@angular/core'
@Directive({
 selector: "[condition]"
})
exportclassConditionDirective{
 @Input() set condition(arg: boolean) {
if(arg) {
this.viewContainer.createEmbeddedView(this.template)
 } else {
this.viewContainer.clear();
 }
 }
constructor(
 private template: TemplateRef, 
 private viewContainer: ViewContainerRef 
 ) {}
}

Bu kod bloğu, aşağıdakileri uygulayarak öğeleri koşullu olarak oluşturmanıza olanak tanır: durum Bir öğeye yönerge verilmesi ve ana bileşenden bir boole değeri iletilmesi.

Yapıcıda Durum Yönergesi sınıfa bir örneğini enjekte edersiniz ŞablonRef Ve ViewContainerRef. TemplateRef, yönergeyle ilişkili şablonu temsil eder ve ViewContainerRef, uygulamanın görünümleri işlediği kapsayıcıyı temsil eder.

ConditionDirective sınıf ayarlayıcı yöntemi, arg parametresini kontrol etmek için bir if else ifadesi kullanır. Yönerge, parametrenin doğru olması durumunda sağlanan şablonu kullanarak gömülü bir görünüm oluşturur. CreateEmbeddedView ViewContainerRef sınıfının yöntemi, görünümü DOM'da oluşturur ve işler.

Parametre ise YANLIŞyönerge, görünüm kabını şunu kullanarak temizler: temizlemek ViewContainerRef sınıfının yöntemi. Bu, önceden oluşturulmuş görünümleri DOM'dan kaldırır.

Direktifi oluşturduktan sonra, onu içe aktararak ve deklare ederek projenize kaydedin. app.module.ts dosya. Bunu yaptıktan sonra yönergeyi şablonlarınızda kullanmaya başlayabilirsiniz.

Bunu şablonlarınızda nasıl kullanacağınıza dair bir örnek:

"true">Hello There!!!</p>
</main>

Artık Özel Direktifler Oluşturabilirsiniz

Angular'daki özel yönergeler, DOM'u işlemek ve şablonlarınıza dinamik davranış eklemek için güçlü bir yol sağlar. Angular uygulamalarınızda özel niteliklerin ve yapısal direktiflerin nasıl oluşturulacağını ve uygulanacağını öğrendiniz. Özel direktiflerin nasıl oluşturulacağını ve kullanılacağını anlayarak Angular'ın yeteneklerinden tam olarak yararlanabilirsiniz.