Angular borularının yardımıyla Angular uygulamalarında veri dönüşümünü kolaylaştırın.

Angular'daki borular, kullanıcıların verileri görünümde gösterilmeden önce dönüştürmesine olanak tanır. Borular, diğer programlama dillerindeki filtrelere benzer, ancak daha esnektir ve belirli ihtiyaçları karşılamak üzere özelleştirilebilir. Burada, Açısal uygulamanızda boruları nasıl kullanacağınızı keşfedeceksiniz.

Köşeli Borular Nelerdir?

Açısal borular, uygulamanızı daha dinamik hale getiren veri dönüştürücülerdir. Girdi olarak bir değer alırlar ve dönüştürülmüş bir değeri çıktı olarak döndürürler. Veri dönüştürme, bir tarihi veya para birimini biçimlendirmek kadar basit veya bir öğe listesini filtrelemek veya sıralamak kadar karmaşık olabilir.

boruları kullanabilirsin Açısal bileşenlerinizde ve şablonlarınız. Boruların kullanımı kolaydır ve daha karmaşık dönüşümler oluşturmak için bunları zincirleyebilirsiniz.

Angular, aşağıdakiler de dahil olmak üzere birkaç yerleşik boru sağlar: Tarih Borusu, Büyük HarfBoru

instagram viewer
, Alt Kasa Borusu, DövizBoru, Ondalık Boru, YüzdeBoru, JsonPipe, DilimBoru, Ve zaman uyumsuz boru. Ayrıca, özel borular oluşturma işlevselliği sağlar.

Her yerleşik Angular boru benzersiz bir işlev gerçekleştirir ve verileri dönüştürmenize yardımcı olabilir.

Tarih Borusu

bu Tarih Borusu biçimler ve görüntüler tarih ve saat değişkenleriniz yerel ayarlarınızı göz önünde bulundurarak belirli bir biçimde. gerektiren diğer çerçevelerin aksine Tarih ve saati biçimlendirmek için JavaScript paketleri, Angular şunu kullanır: Tarih Borusu. Kullanmak Tarih Borusu uygulamanızda dikey çizgi simgesini (|) ve ardından tarih ve herhangi bir ek parametre.

Örneğin:

<p>Today's date is {{ currentDate | date }}p>

Bu örnekte, Geçerli tarih aracılığıyla değişken Tarih Borusu, ardından varsayılan tarih biçimine göre biçimlendirir. siz tanımlayın Geçerli tarih bileşeninizin TypeScript dosyasındaki değişken.

İşte bir örnek:

import { Component } from'@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss']
})
exportclass AppComponent {
 currentDate: any = newDate();
}

Ayrıca ek parametreler de iletebilirsiniz. Tarih Borusu çıktıyı özelleştirmek için:

<p>Today's date is {{ currentDate | date:'shortDate' }}p>

Yukarıdaki kod bloğu, kısa tarih parametresi Tarih Borusu. Bu anlatır Tarih Borusu kısa tarih formatını kullanarak tarihi formatlamak için. yanında kısa tarih parametresini yapılandırabilirsiniz. Tarih Borusu dahil olmak üzere çeşitli parametreler kullanılarak z, uzun tarihve gibi özel tarih biçimleri gg/AA/YY.

UpperCasePipe ve LowerCasePipe

bu Büyük HarfBoru Ve Alt Kasa Borusu metinlerinizi dönüştürün. kullanarak metinlerinizi büyük harfe dönüştürürsünüz. Büyük HarfBoru ve küçük harf kullanarak Alt Kasa Borusu.

kullanmak için Büyük HarfBoru Ve Alt Kasa Borusu, boru sembolünü (|) ekleyin ve ardından küçük harf kullanmak için Alt Kasa Borusu veya büyük harf kullanmak için Büyük HarfBoru.

Aşağıda, nasıl kullanılacağına ilişkin bir örnek verilmiştir. Büyük HarfBoru Ve Alt Kasa Borusu:

<p>{{ message | uppercase}}p>
<p>{{ message | lowercase}}p>

DövizBoru

Kullanmak DövizBoru, sayıları uygulamanızda bir para birimine göre biçimlendirebilirsiniz. bu DövizBoru sayıları yerel ayarınıza göre biçimlendirir. kullanarak numaralarınızı biçimlendirmek için DövizBoru, ardından boru sembolünü kullanın para birimi.

Örneğin:

<p>{{ number | currency }}p>

Bu örnekte, DövizBoru sayı değişkenini bir para birimine dönüştürür. varsayılan olarak, DövizBoru değişkenleri dolara dönüştürür. Bunu değiştirmek için, DövizBoru ek parametreler geçirerek diğer para birimlerine dönüştürmek için.

İşte bir örnek:

<p>{{ number | currency: 'GBP' }}p>

Burada, geçmek GBP parametresi DövizBoru. Bu, sayı değişken İngiliz Sterlini para birimine dönüştürür.

DecimalPipe ve PercentPipe

bu Ondalık Boru sayılarınızı ondalık sayılara dönüştürürken, YüzdeBoru Sayılarınızı yüzdeye dönüştürür.

kullanmak için Ondalık Boru, ardından boru sembolünü kullanın sayı ve ek parametreler. kullanmak için YüzdeBoru, aynısını yapın ama değiştirin sayı ile yüzde ek parametre olmadan.

Örneğin:

<p>{{ number | number: '1.2-3' }}p>
<p>{{ number | percent }}p>

Ek parametrelere aktarılan Ondalık Boru görüntülenen tamsayı ve kesirli basamak sayısını kontrol edin. bu 1 parametresi en az bir tamsayı olması gerektiğini belirtir. karşılaştırıldığında, 2.3 parametresi en az iki ve en fazla üç kesirli basamak olması gerektiğini belirtir.

JsonPipe

bu JsonPipe verileri bir JSON dize biçimine dönüştüren yerleşik bir kanaldır. Esas olarak hata ayıklama amacıyla kullanılır. kullanabilirsiniz JsonPipe hem nesnelerde hem de dizilerde.

Kullanmak için sözdizimi JsonPipe Şöyleki:

{{ expression | json }}

Burada, ifade JSON biçimine dönüştürmek istediğiniz verilerdir. Boru operatörü (|) şu değeri uygular: JsonPipe ifadeye.

Örneğin, bileşeninizde bir nesne ve bir dizi tanımlayın:

import { Component } from"@angular/core";
@Component({
 selector: "app-root",
 templateUrl: "./app.component.html",
 styleUrls: ["./app.component.scss"],
})


exportclass AppComponent {
 user: data = {
 firstname: "John",
 lastname: "Doe",
 };


 profiles: data[] = [
 {
 firstname: "John",
 lastname: "Doe",
 },
 {
 firstname: "Peter",
 lastname: "Parker",
 },
 ];
}
interface data {
 firstname: string;
 lastname: string;
}

Yukarıdaki kod bloğu bir kullanıcı nesne ve bir profiller sıralamak. Şimdi, JsonPipe nesneyi ve diziyi JSON'a dönüştürmek için.

<p>{{ user | json}}p>
<p>{{ profiles | json}}p>

Burada, JsonPipe dönüştürecek kullanıcı nesne ve profiller geliştirme veya hata ayıklama sırasında şablonlarınızda hızlı bir şekilde inceleyebileceğiniz bir JSON dizesine dönüştürün.

DilimBoru

bu DilimBoru JavaScript'e çok benzer dilim() yöntem. bu DilimBoru yeni diziler veya dizeler oluşturmak için öğelerini ayıklayarak dizileri veya dizeleri biçimlendirir.

kullanmak için DilimBoru, boru sembolünü kullanırsınız ve ardından dilim ve iki parametre, başlangıç ​​ve bitiş indeksleri. Başlangıç ​​dizini, dizide veya dizede, borunun öğeleri ayıklamaya başlayacağı konumdur ve bitiş dizini, borunun öğeleri ayıklamayı durduracağı yerdir.

İşte nasıl kullanılacağına dair bir örnek DilimBoru:

<p>{{ string | slice: 0:2}}p>
<p>{{ array | slice: 0:1}}p>

Bu örnekte, DilimBoru ilk iki elemanı ayıklayacak sicim değişken, 0 indeksindeki eleman ve 1 indeksindeki eleman. Ayrıca, ilk elemanı ayıklayacaktır. sıralamak değişken. bu DilimBoru şablonda verilerin yalnızca bir kısmını görüntülemek istediğinizde kullanışlıdır.

zaman uyumsuz boru

zaman uyumsuz boru bir Gözlemlenebilir veya Söze otomatik olarak abone olan ve abonelikten çıkan yerleşik bir Açısal kanaldır. Observable veya Promise tarafından yayınlanan en son değeri döndürür.

Kullanmak için sözdizimi zaman uyumsuz boru Şöyleki:

{{ expression | async }}

Buradaki ifade, abone olmak istediğiniz Gözlemlenebilir veya Sözdür.

Örneğin:

let numbers = of(1, 2, 3, 4, 5);

Kullanabilirsiniz zaman uyumsuz boru bu Gözlemlenebilir'e abone olmak ve en son yayılan değeri şu şekilde görüntülemek için:

<p>{{ numbers | async }}p>

Bu kod bloğu, Gözlemlenebilir tarafından yayınlanan en son sayıyı verecektir. zaman uyumsuz boru şablonlarınızda eşzamansız işlemleri gerçekleştirirken çok kullanışlıdır. Bileşen başlatıldığında Gözlemlenebilir veya Söz Vermeye otomatik olarak abone olur ve yok edildiğinde abonelikten çıkar.

Açısal Zincirleme Borular

Tek bir ifadede birden çok dönüşüm gerçekleştirmek için boruları birbirine zincirleyebilirsiniz. Boruları zincirlemek, tek bir ifadede çok sayıda boru operatörü (|) kullanmak kadar basittir. Her borunun çıktısı bir sonrakinin girdisi olur.

İşte temel sözdizimi:

<p>{{ expression | pipe1 | pipe2 |... }}p>

Örneğin, bir tarih nesnesini kullanarak bir dizgeye dönüştürebilirsiniz. Tarih Borusu ve sonra bu dizgiyi kullanarak büyük harfe dönüştürün. Büyük HarfBoru.

<p>Today's date is {{ currentDate | date:'shortDate' | uppercase }}p>

Boruları Kullanarak Dinamik Uygulamalar Oluşturun

Borular, verileri görünümde görüntülenmeden önce dönüştürmenize izin veren güçlü bir Angular özelliğidir. Burada, DatePipe, CurrencyPipe, UpperCasePipe, vb. gibi Angular'ın sunduğu çeşitli yerleşik yöneltmeler hakkında bilgi edindiniz. Daha dinamik içerik oluşturmak için bunları uygulamanızda nasıl kullanacağınızı da öğrendiniz. Geliştiriciler boruları kullanarak daha az kodla daha esnek ve dinamik web uygulamaları oluşturabilir.