Paip Sudut: Panduan Komprehensif

Paip dalam Angular ialah fungsi mudah yang digunakan untuk mengubah data dalam templat tanpa mengubah suai data asas. Paip mengambil nilai, memprosesnya dan mengembalikan output yang diformat atau diubah. Ia sering digunakan untuk memformat tarikh, nombor, rentetan dan juga tatasusunan atau objek.

Ia membolehkan anda memformat dan memaparkan data dalam format yang lebih mudah dibaca atau berkaitan terus dalam paparan tanpa mengubah model data asas.

Menggunakan paip membantu dalam memastikan kod bersih dan boleh dibaca. Daripada menulis logik kompleks dalam templat atau komponen, anda boleh merangkum logik itu dalam paip, yang kemudiannya boleh digunakan semula di seluruh bahagian aplikasi anda.
Contohnya, jika anda sedang membangunkan platform blog di mana pengguna boleh melihat tarikh penerbitan artikel. Tarikh perlu dipaparkan dalam format mesra pengguna, seperti "31 Ogos 2024", bukannya format mentah "2024–08–31T14:48:00.000Z". Dengan paip, anda boleh menggunakan DatePipe terbina dalam Angular dalam templat dan bukannya memformat tarikh secara manual dalam komponen, mengacaukan kod dan mengurangkan kebolehbacaan.

<p>Published on: {{ article.publishDate | date:'longDate' }}</p>

Untuk menggunakan paip, gunakan paip pengendali (|) dalam ungkapan templat seperti yang ditunjukkan dalam contoh kod di atas.

Paip Terbina dalam

Angular datang dengan beberapa paip terbina dalam yang meliputi tugas biasa (DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, AsyncPipe, JsonPipe, dll.). Mengetahui cara menggunakan ini boleh menjadikan kod anda lebih bersih dan lebih cekap.

Contoh:

<pre class="brush:php;toolbar:false">{{ user | json }}

Price: {{ product.price | currency:'USD' }}

{{ user.name | uppercase }}

Paip Berparameter

Banyak paip Angular menerima parameter untuk menyesuaikan tingkah lakunya.

Untuk menentukan parameter, ikut nama paip dengan kolon (:) dan nilai parameter

Sesetengah paip menerima berbilang parameter, yang dipisahkan oleh titik bertindih tambahan.

Parameter boleh menjadi pilihan atau diperlukan. Katakan anda mempunyai paip tersuai yang memformat mata wang dan memerlukan anda untuk menentukan jenis mata wang sebagai parameter. Jika parameter ini tidak disediakan, paip mungkin tidak dapat memformat nilai dengan betul.

<p>The product price is {{ price | customCurrency:'USD' }}</p>

1. DatePipe dengan Parameter

<p>Published on: {{ article.publishDate | date:'MMMM d, y, h:mm:ss a' }}</p>

Ini memformat tarikh sebagai "31 Ogos 2024, 2:48:00 PTG".

2. CurrencyPipe dengan Parameter

<p>Price: {{ product.price | currency:'EUR':'symbol-narrow':'1.0-0' }}</p>

Ini memformatkan harga sebagai “€1,235” (dibundarkan kepada tiada tempat perpuluhan).

Merantai Paip

Anda boleh rantai berbilang paip bersama-sama untuk mencapai transformasi yang kompleks.

<p>{{ article.content | slice:0:100 | uppercase }}</p>

Ini akan menghiris 100 aksara pertama article.content dan menukarnya kepada huruf besar.

Paip Tersuai

Kadangkala, paip terbina dalam mungkin tidak memenuhi keperluan khusus anda dan anda perlu membuat paip tersuai untuk mengendalikan logik tertentu. Begini cara anda boleh melakukannya.

Contoh:

Dalam contoh berikut, kita akan mencipta paip yang menambahkan ucapan pada nama seperti "Hello, Alice!"

Jalankan arahan berikut untuk menjana paip baharu:

ng generate pipe greet

Sekarang, mari kita ubah suai fail greet.pipe.ts dalam direktori src/app untuk memasukkan logik paip:

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

@Pipe({
  name: 'greet',  // This is the name you'll use in the template
  standalone: true,
})
export class GreetPipe implements PipeTransform {
  transform(value: string): string {
    return `Hello, ${value}!`;  // This is the transformation logic
  }
}

Setelah paip anda sedia, anda boleh menggunakannya dalam templat anda.

<p>{{ 'Alice' | greet }}</p>

Mencipta Paip Tersuai Berparameter

Kini kami akan membuat ucapan itu boleh disesuaikan, jadi anda boleh berkata "Hai, Alice!" atau “Selamat datang, Alice!” bergantung pada apa yang anda hantar ke paip.

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

@Pipe({
  name: 'greet',  // Same pipe name as before
  standalone: true,
})
export class GreetPipe implements PipeTransform {
  transform(value: string, greeting: string = 'Hello'): string {
    return `${greeting}, ${value}!`;  // Now it uses the greeting passed in
  }
}

Kaedah transformasi kini mempunyai parameter kedua, salam. Jika tiada sapaan diberikan, ia lalai kepada “Hello”.

Kini anda boleh menyesuaikan ucapan dalam templat anda.

<p>{{ 'Alice' | greet:'Hi' }}</p>
<p>{{ 'Bob' | greet:'Welcome' }}</p>

Paip Tulen vs

1. Paip Tulen
Secara lalai, semua paip Sudut adalah tulen. paip tulen hanya dipanggil apabila data input (seperti nombor atau rentetan) atau apabila rujukan kepada objek (seperti tatasusunan atau tarikh) berubah. Ini menjadikan paip tulen cekap dan berprestasi kerana paip tidak berjalan tanpa keperluan.

Walau bagaimanapun, jika data anda lebih kompleks, seperti tatasusunan item, Angular mungkin tidak melihat perubahan dalam tatasusunan (seperti menambah item baharu) kerana rujukan kepada tatasusunan tidak berubah.

Melainkan perlu, pastikan paip anda tulen untuk mengelakkan paparan semula yang tidak perlu dan untuk mengekalkan prestasi.

Contoh:

@Pipe({
  name: "onSale",
  standalone: true,
  pure: true,
})
export class OnSalePipe implements PipeTransform {
  transform(items: Item[]): Item[] {
    return items.filter((item) => item.isOnSale);
  }
}

Dalam templat anda:

<ul>
  <li *ngFor="let item of (items | onSale)">
    {{ item.name }} - {{ item.price | formatPrice }}
  </li>
</ul>

If you add a new item to the items array that’s on sale, you might expect it to show up in the list. But if you simply push the new item into the array, the list might not update because the array reference hasn’t changed.

2. Impure Pipes

An impure pipe, on the other hand, is called every time Angular performs a change detection cycle. However, because they run so often, they can slow down your app.

Example:

@Pipe({
  name: "onSaleImpure",
  standalone: true,
  pure: false,
})
export class OnSaleImpurePipe implements PipeTransform {
  transform(items: Item[]): Item[] {
    return items.filter((item) => item.isOnSale);
  }
}

In your template:

<ul>
  <li *ngFor="let item of (items | onSaleImpure)">
    {{ item.name }} - {{ item.price | formatPrice }}
  </li>
</ul>

Now, when you add a new item, the pipe will notice the change and update the list.

Best Practices for Using Pipes

1. Keep Pipes Simple. Avoid Heavy Computations in Pipes

2. Name Pipes Clearly and Descriptively

3. Keep Pipes Focused on a Single Responsibility

4. Avoid Impure Pipes When Possible

5. Test Custom Pipes Thoroughly

Conclusion

Angular pipes streamline data transformation tasks, making your code more modular, reusable, and maintainable. They help to enforce consistency across the application and improve the readability of your templates, which is crucial for developing scalable and maintainable applications.

Atas ialah kandungan terperinci Paip Sudut: Panduan Komprehensif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!