Açısal Olarak Özel Borular Nasıl Oluşturulur

Borular, uygulamanızdaki verileri dönüştürmenize ve biçimlendirmenize olanak tanıyan güçlü bir Açısal özelliktir. Verileri kullanıcıya göstermeden önce işlemek için uygun bir yol sağlayarak uygulamanızı daha dinamik ve kullanıcı dostu hale getirirler.

Angular, DatePipe, CurrencyPipe ve UpperCasePipe gibi çeşitli yerleşik kanallar sunar. Angular'ın sunduğu yerleşik kanallarla birlikte, verileri istediğiniz şekilde dönüştürmek için özel kanallar oluşturabilirsiniz.

Açısal Projenizi Kurun

Özel borular oluşturmadan önce şunları yaptığınızdan emin olun: Angular'da boruları anlama. Angular projesi kurabilmek için makinenizde Angular CLI'nin kurulu olduğundan emin olun. İle yükleyebilirsiniz npm (Düğüm Paketi Yöneticisi).

Aşağıdaki komutu çalıştırarak Angular CLI'yi yükleyin:

npm install -g @angular/cli

Daha sonra şu komutu çalıştırarak yeni bir Angular projesi oluşturun:

ng new my-app

Projeyi oluşturduktan sonra proje dizininize gidin ve uygulamanızı IDE'nizde açın.

Özel Boru Oluşturun

Artık Angular uygulamanızı kurduğunuza göre yapacağınız bir sonraki şey özel bir kanal oluşturmaktır. Özel bir kanal oluşturmak için Angular CLI'yi kullanarak yeni bir kanal oluşturmanız gerekir.

Bunu yapmak için terminaldeki uygulamanızın dizininde aşağıdaki komutu çalıştırın:

ng generate pipe customPipe

Bu komut adında iki dosya oluşturacaktır. özel-pipe.pipe.ts Ve özel-pipe.pipe.spec.ts içinde kaynak/uygulama dizin. Custom-pipe.pipe.ts dosyası bir TypeScript dosyası özel borunuzu tanımlamak için gereken kodu içerir. Özel kanal üzerinde testler çalıştırmak içincustom-pipe.pipe.spec.ts dosyasını kullanacaksınız.

İçinde özel-pipe.pipe.ts dosyasında şu kod satırlarını bulacaksınız:

import { Pipe, PipeTransform } from'@angular/core';
@Pipe({
 name: 'customPipe'
})
exportclass CustomPipePipe implements PipeTransform {
 transform(value: unknown, ...args: unknown[]): unknown {
returnnull;
 }
}

Bu kod bloğu şunları içe aktarır: Boru dekoratör ve Boru Dönüşümü gelen arayüz @açısal/çekirdek modülü. Boru dekoratörü borunun meta verilerini tanımlar ve boru sınıfı PipeTransform arayüzünü uygular.

İçinde Özel Boru Borusu sınıfta, siz uygularsınız Boru Dönüşümü uygulanmasını gerektiren bir arayüz dönüştürmek yöntem. Transform yöntemi giriş değerinin dönüştürülmesinden sorumludur.

dönüştürmek yöntem iki parametre alır, değer Ve argümanlar. Value parametresi kanalın dönüşüm değerini, args parametresi ise eklemek isteyebileceğiniz isteğe bağlı parametreleri temsil eder.

Artık işin genel mantığını anladınız özel-pipe.pipe.ts dosyasında yukarıdaki kod bloğunu şu kodla değiştirin:

import { Pipe, PipeTransform } from'@angular/core';
@Pipe({
 name: 'customPipe'
})
exportclass CustomPipePipe implements PipeTransform {
 transform(value: string): string[] {
return value.split('');
 }
}

Bu kod bloğunda, dönüştürmek yöntem şunları alır değer türün parametresi sicim argüman olarak ve bir dizi dize döndürür. Transform yöntemi, giriş dizesini aşağıdakileri kullanarak tek tek karakterlerden oluşan bir diziye böler: bölmek yöntemini kullanır ve elde edilen diziyi döndürür.

Özel Boruyu Uygulamanıza Entegre Etme

Özel kanalınızı başarıyla oluşturdunuz ve artık bunu Angular şablonlarınızda kullanabilirsiniz. Özel boruyu uygulamanızda kullanmadan önce, onu içe aktarın ve beyan edin. app.module.ts dosya. Bunu yapmak için app.module.ts dosyasındaki kodu aşağıdakiyle değiştirin:

import { NgModule } from'@angular/core';
import { BrowserModule } from'@angular/platform-browser';
import { AppRoutingModule } from'./app-routing.module';
import { AppComponent } from'./app.component';
import { CustomPipePipe } from'./custom-pipe.pipe';
@NgModule({
 declarations: [
 AppComponent,
 CustomPipePipe
 ],
 imports: [
 BrowserModule,
 AppRoutingModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
exportclass AppModule { }

Artık boruyu şablonlarınızda kullanabilirsiniz. Aç uygulama.bileşen.html dosyalayın ve aşağıdaki kodu ekleyin:

<p>{{ 'apple' | CustomPipe }}p>

Bu örnekte, Özel Boru dizeyi dönüştürmek için boru 'elma' bir dize dizisine.

Özel Borunuzu Test Edin

Özel kanalınızı çalışırken görmek için Angular geliştirme sunucusunu çalıştırın. Bunu aşağıdaki terminal komutunu çalıştırarak yapabilirsiniz:

ng serve

Tarayıcınızı açın ve şuraya gidin: http://localhost: 4200. Sayfada görüntülenen dönüştürülmüş dizeyi görmelisiniz:

Açısal Uygulamalarınızı Bir Sonraki Seviyeye Taşıyın

Borular, uygulamanızdaki verileri dönüştürmenize ve biçimlendirmenize olanak tanıyan güçlü bir Açısal araçtır. Özel ihtiyaçlarınıza uygun özel borular oluşturabilir ve Angular uygulamanızı daha dinamik hale getirebilirsiniz.

Angular uygulamalarınızı bir sonraki seviyeye taşımanın bir başka yolu da Angular'da yönlendirmeyi anlamaktır. Yönlendirme, kullanıcıların uygulamanızda nasıl gezineceğini kontrol etmenize olanak tanıyan önemli bir kavramdır. Yönlendirmeyi anlayarak daha kullanıcı dostu ve verimli tek sayfalı uygulamalar oluşturabilirsiniz.