0Pricing
Angular Academy · Ders

Özel Pipe'lar Oluşturma

Yeniden kullanılabilir dönüştürme pipe'ları oluşturun.

Özel Pipe'lar Oluşturma, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.

Neden Özel Pipe Kullanılır

Yerleşik pipe'lar yeterli olmadığında, şablonlarınızda yeniden kullanılabilir dönüştürme mantığını kapsüllemek için özel bir pipe oluşturabilirsiniz.

@Pipe Dekoratörü

Pipe, @Pipe ile dekore edilmiş bir sınıftır. Şablonlarda kullanacağınız ad, name özelliğinde belirtilir.

import { Pipe } from "@angular/core";

@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe {}

PipeTransform Uygulama

Bir pipe sınıfı, tek bir transform yöntemi gerektiren PipeTransform arayüzünü uygular.

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe implements PipeTransform {
  transform(value: string): string {
    return value + "!";
  }
}

transform Yöntemi

transform yönteminin ilk parametresi pipe'a aktarılan değerdir. Döndürdüğünüz değer, oluşturulan çıktı olur.

transform(value: string): string {
  return value.trim();
}

Pipe'ınızı Kullanma

Pipe'ı bağımsız bir bileşene içe aktarın, ardından adını tıpkı yerleşik bir pipe gibi şablonda kullanın.

@Component({
  selector: "app-demo",
  standalone: true,
  imports: [ExclaimPipe],
  template: "<p>{{ 'hi' | exclaim }}</p>"
})
export class DemoComponent {}
// renders: hi!

Bağımsız Değişken Kabul Etme

value sonrasındaki ek parametreler pipe bağımsız değişkenleri olur. Çağıranlar bunları iki nokta üst üste işaretleriyle geçirir.

@Pipe({ name: "repeat", standalone: true })
export class RepeatPipe implements PipeTransform {
  transform(value: string, times: number): string {
    return value.repeat(times);
  }
}
// {{ "ab" | repeat:3 }} -> ababab

Varsayılan Bağımsız Değişken Değerleri

Çağıranların bağımsız değişkenleri belirtmemesine olanak tanımak için onlara varsayılan değerler verin. Bu, pipe'ınızı esnek tutar.

transform(value: string, times: number = 2): string {
  return value.repeat(times);
}
// {{ "ab" | repeat }} -> abab

Null ve Undefined Değerlerini Ele Alma

Eksik girdilere karşı her zaman kontrol yapın. Değer null veya undefined olduğunda uygun bir alternatif değer döndürün.

transform(value: string | null): string {
  if (value == null) return "";
  return value.toUpperCase();
}

Truncate Pipe Örneği

Burada uzun metinleri kısaltıp sonuna üç nokta ekleyen pratik bir pipe bulunmaktadır.

@Pipe({ name: "truncate", standalone: true })
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit: number = 20): string {
    if (!value) return "";
    return value.length > limit
      ? value.slice(0, limit) + "..."
      : value;
  }
}

Döndürülen Değerin Türünü Belirtme

Döndürülen türü belirterek TypeScript'in ve şablonlarınızın tür güvenliğini koruyun. Bir pipe yalnızca dize değil, her tür değeri döndürebilir.

@Pipe({ name: "double", standalone: true })
export class DoublePipe implements PipeTransform {
  transform(value: number): number {
    return value * 2;
  }
}

Bir Modüle Kaydetme (NgModule)

Bağımsız bileşenler yerine NgModules kullanıyorsanız pipe'ı declarations içinde bildirin ve gerekiyorsa dışa aktarın.

@NgModule({
  declarations: [TruncatePipe],
  exports: [TruncatePipe]
})
export class SharedModule {}

Hızlı Kontrol

Özel pipe'lar konusundaki anlayışınızı sınayın.

Özet

@Pipe ve PipeTransform kullanarak özel bir pipe oluşturdunuz, varsayılan değerlere sahip bağımsız değişkenler kabul ettiniz, null değerlerine karşı kontrol yaptınız ve pipe'ı bağımsız bileşenlere veya NgModules'a kaydettiniz.

Sonraki adımda saf ve saf olmayan pipe'ları öğreneceksiniz.

Sıkça Sorulan Sorular

“Özel Pipe'lar Oluşturma” dersi ücretsiz mi?

Evet — “Özel Pipe'lar Oluşturma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.

“Özel Pipe'lar Oluşturma” dersinde ne öğreneceğim?

Yeniden kullanılabilir dönüştürme pipe'ları oluşturun. Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Angular Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Özel Pipe'lar Oluşturma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Yerleşik Pipe'ları Kullanma
  2. Pipe'ları Zincirleme ve Parametreleştirme
  3. Özel Pipe'lar Oluşturma
  4. Saf ve Saf Olmayan Pipe'lar
← Angular Academy Sayfasına Dön