Angular Academy · Pelajaran

Mencipta Pipe Tersuai

Bina pipe transformasi yang boleh diguna semula.

Pelajaran 3 daripada 413 langkah

Mencipta Pipe Tersuai ialah pelajaran Angular Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Angular Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.

Mengapa Pipe Tersuai?

Apabila pipe terbina dalam tidak mencukupi, anda boleh mencipta pipe tersuai untuk merangkum logik transformasi yang boleh digunakan semula dalam templat anda.

Penghias @Pipe

Pipe ialah kelas yang dihiasi dengan @Pipe. Sifat name ialah nama yang anda gunakan dalam templat.

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

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

Melaksanakan PipeTransform

Kelas pipe melaksanakan antara muka PipeTransform, yang memerlukan satu kaedah transform.

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

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

Kaedah transform

Parameter pertama bagi transform ialah nilai yang melalui pipe. Apa sahaja yang anda pulangkan akan menjadi output yang dipaparkan.

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

Menggunakan Pipe Anda

Import pipe ke dalam komponen kendiri, kemudian gunakan namanya dalam templat seperti menggunakan pipe terbina dalam.

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

Menerima Argumen

Parameter tambahan selepas value menjadi argumen pipe. Pemanggil menghantarnya menggunakan titik bertindih.

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

Nilai Argumen Lalai

Berikan nilai lalai kepada argumen supaya pemanggil boleh mengabaikannya. Ini menjadikan pipe anda lebih fleksibel.

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

Mengendalikan Null dan Undefined

Sentiasa kendalikan input yang tiada. Pulangkan nilai sandaran yang munasabah apabila nilainya null atau undefined.

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

Contoh Pipe Truncate

Berikut ialah pipe praktikal yang memendekkan teks panjang dan menambah elipsis.

@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;
  }
}

Menetapkan Jenis Nilai Pulangan

Anotasikan jenis pulangan supaya TypeScript dan templat anda kekal selamat dari segi jenis. Pipe boleh memulangkan apa-apa jenis, bukan rentetan sahaja.

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

Mendaftarkan dalam Modul (NgModule)

Jika anda menggunakan NgModules dan bukannya komponen kendiri, isytiharkan pipe dalam declarations dan eksportkannya jika diperlukan.

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

Semakan Ringkas

Uji pemahaman anda tentang pipe tersuai.

Jawab dalam pelajaran interaktif

Imbas Kembali

Anda telah membina pipe tersuai dengan @Pipe dan PipeTransform, menerima argumen dengan nilai lalai, mengendalikan nilai null, serta mendaftarkannya dalam komponen kendiri atau NgModules.

Seterusnya, anda akan mempelajari pipe tulen berbanding pipe tidak tulen.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 38
Pelajaran: 144

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Mencipta Pipe Tersuai” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Angular Academy, termasuk “Mencipta Pipe Tersuai”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Mencipta Pipe Tersuai”?

Bina pipe transformasi yang boleh diguna semula. Anda berlatih Angular Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Angular Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Angular Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Mencipta Pipe Tersuai” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy