Artikel untuk bercakap tentang saluran paip (PIPE) dalam Angular

Apakah itu PAIP? Artikel ini akan memperkenalkan anda kepada saluran paip (PIPE) dalam Sudut, dan bercakap tentang kaedah saluran paip terbina dalam dan saluran paip tersuai saya harap ia akan membantu anda!

Apakah itu saluran paip (PAIP)

---

PAIP, diterjemahkan sebagai saluran paip. Paip Sudut ialah cara menulis transformasi nilai paparan yang boleh diisytiharkan dalam komponen HTML. Talian paip sudut sebelum ini dikenali sebagai penapis dalam AngularJS dan sejak Angular 2 dikenali sebagai paip. Paip mengambil data sebagai input dan mengubahnya menjadi output yang diingini. [Tutorial berkaitan yang disyorkan: tutorial sudut, Pengajaran pengaturcaraan]

Secara ringkasnya, Paip Sudut boleh membantu kami menukar input kami, termasuk rentetan , integer , tarikh, dsb., ditukar kepada format khusus mengikut keperluan kami dan dipaparkan dalam penyemak imbas. Melalui ungkapan interpolasi, kami boleh mentakrifkan saluran paip dan menggunakannya dalam situasi tertentu Angular menyediakan kami dengan pelbagai jenis saluran paip. Anda juga boleh menyesuaikan saluran paip.

Untuk memberikan contoh yang agak mudah, terdapat pelbagai format tarikh Anda boleh menukar antara pelbagai format melalui saluran paip, seperti menukar saat kepada jam, minit dan saat.

Paip terbina dalam

---

Seperti yang dinyatakan di atas, Angular menyediakan kami dengan pelbagai jenis paip semua paip terbina dalam Angular Mengenai apa itu paip terbina dalam dan cara menggunakannya, mari kita tunjukkan melalui kod di bawah.

Jalur Paip Masadate

Kami mencipta projek Angular baharu dan menambah new Date() pada halaman:

<div>{{data}}</div>
...
export class AppComponent {
  title = &#39;my-app&#39;;
  data = new Date()
}

Halaman akan memaparkan masa semasa:

Kemudian kita boleh menggunakan saluran paip terbina dalam untuk menukar format masa Sintaks saluran paip perlu ditambah selepas pembolehubah. simbol |, dan mengisytiharkan saluran paip

<div>{{data | date:&#39;yyyy-MM-dd&#39;}}</div>

Di sini kami menggunakan saluran paip date Untuk butiran tentang parameter khusus saluran paip, anda boleh membaca dokumen rasmi, yang memperkenalkan semua transformasi yang disediakan untuk anda.

Angular - DatePipe

https://angular.cn/api/common/DatePipe#description

Selepas kami menyediakan saluran paip, semak imbas Masa dalam pemproses telah berubah

Paip lain

Angular juga menyediakan paip lain, seperti menukar nama mata wang Format paip (mata wang):

Sudut - CurrencyPipe

https://angular.cn/api/common/CurrencyPipe

Terdapat juga paip (huruf besar) yang menukar rentetan kepada huruf besar:

<div>{{&#39;ASDasd&#39; | uppercase }}</div>

Sudut - UpperCasePipe

https://angular.cn/api/common/UpperCasePipe

Paip tersuai

---

Di atas kami memperkenalkan beberapa paip terbina dalam, Sekiranya saluran paip terbina dalam tidak dapat memenuhi keperluan pembangunan kami, Angular juga menyediakan kami saluran paip tersuai Anda boleh menentukan sendiri saluran paip dan menentukan cara mengubah input.

Kami boleh menjana saluran paip dengan cepat melalui baris arahan yang disediakan oleh Angular:

ng g p pipes/pipe-name

Di sini saya mencipta saluran paip bernama ujian

Selepas anda menjalankan arahan di atas, folder paip akan dibuat untuk anda di bawah src, yang mengandungi saluran paip tersuai anda

Kemudian Angular akan memperkenalkan paip ini secara automatik untuk anda dalam apl, supaya anda boleh menggunakan paip tersuai di mana-mana di dunia.

Kemudian anda melihat paip di bawah folder paip Paip itu pada asasnya ialah kelas Di sini, penghias digunakan untuk memberikannya nama ujian.

在这个类里面我们需要去实现 PipeTransfrom 这个接口，也就是需要有 transform 这个方法，在这个方法中，第一个参数就是要放入管道的输入，第二个数据是我们向管道传递的参数，管道中把它放入了一个数组里面。

这个 transform 方法返回什么，我们的页面拿到的就是什么数据，我们先来做一个测试

  transform(value: unknown, ...args: unknown[]): unknown {
    return 'tests';
  }
  ...
  <div>{{&#39;ASDasd&#39; | tests }}</div>

返回一个固定的字符串，并且在页面中去使用它

可以看到返回的结果变成了 tests 字符串，这样我们就可以确定这个方法的返回值就是最终的输出。

接下来我们实现一个简单的字符串超出截取的管道：

  transform(value: string, ...args: number[]): string {
    let defaultLength = 10;
    if((args[0] || defaultLength )< value.length){
      return value.substr(0,args[0] || defaultLength)+&#39;...&#39;
    }else{
      return value
    }
  }
  ...
  <div>{{&#39;sssssssssssssssssssssssssssssss&#39; | tests: 30 }}</div>

这样就能够对字符串进行一个截取并且在尾部添加 ...

总结

---

本文我们学习了 Angular 中管道的使用，简单的来说管道就是一个方法，可以将你的输入转化为特定的你需要的输出格式，Angular提供给了我们许多的内置管道，当内置管道不满足你的要求的时候，你还可以通过自定义管道来更加灵活的自定义输出格式

更多编程相关知识，请访问：编程视频！！

Atas ialah kandungan terperinci Artikel untuk bercakap tentang saluran paip (PIPE) dalam Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!