Apakah saluran paip? Analisis ringkas saluran paip (PIPE) dalam Sudut

Apakah itu saluran paip? Artikel ini akan memperkenalkan anda kepada saluran paip (PIPE) dalam Angular dan bercakap tentang cara menyesuaikan saluran paip 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. [Cadangan tutorial berkaitan: "tutorial sudut"]

Ringkasnya, Paip Sudut boleh membantu kami menukar input kami, termasuk rentetan, integer, tarikh, dll., mengikut Ia kami perlu ditukar kepada format tertentu 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 membekalkan kita dengan pelbagai jenis paip, yang merupakan binaan Angular- dalam talian paip Mengenai saluran paip terbina dalam dan cara menggunakannya, kod berikut akan menunjukkannya.

Jalur Paip Masadate

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

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

Halaman ialah Masa semasa akan dipaparkan:

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 sepanjang masa format yang disediakan untuk anda tukar .

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 telah memperkenalkan beberapa paip terbina dalam, untuk berjaga-jaga Jika 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 menukar 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 pipes akan dibuat untuk anda di bawah src, yang mengandungi paip tersuai anda

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

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

Dalam kelas ini kita perlu melaksanakan antara muka PipeTransfrom, yang bermaksud kita perlu mempunyai kaedah transformasi Dalam kaedah ini, parameter pertama ialah input untuk dimasukkan ke dalam paip, dan data kedua ialah input yang ingin kami masukkan ke dalam paip Parameter yang diluluskan oleh saluran paip dimasukkan ke dalam tatasusunan dalam saluran paip.

这个 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 Apakah saluran paip? Analisis ringkas saluran paip (PIPE) dalam Sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!