Un article pour parler des pipelines (PIPE) en Angular

Qu'est-ce que le TUYAU ? Cet article vous présentera le pipeline (PIPE) dans Angular et parlera des méthodes de pipelines intégrés et de pipelines personnalisés. J'espère qu'il vous sera utile !

Qu'est-ce qu'un pipeline (PIPE)

---

PIPE, traduit par pipeline. Les tuyaux angulaires sont un moyen d'écrire des transformations de valeur d'affichage qui peuvent être déclarées dans les composants HTML. Les pipelines angulaires étaient auparavant appelés filtres dans AngularJS et depuis Angular 2, ils sont appelés tuyaux. Les tuyaux prennent les données en entrée et les transforment en sortie souhaitée. [Recommandations de didacticiels connexes : Tutoriel angulaire, Enseignement de la programmation]

En termes simples, Angular Pipes peut nous aider à convertir nos entrées, y compris les chaînes, les entiers, les dates, etc., en données spécifiques selon le format et l'affichage de nos besoins. dans le navigateur. Grâce aux expressions d'interpolation, nous pouvons définir un pipeline et l'utiliser dans des situations spécifiques. Angular nous propose de nombreux types de pipelines différents. Bien sûr, vous pouvez même personnaliser les pipelines.

Pour donner un exemple relativement simple, il existe différents formats de date. Vous pouvez convertir entre différents formats via des pipelines, comme la conversion des secondes en heures, minutes et secondes.

Tuyaux intégrés

---

Comme mentionné ci-dessus, Angular nous propose de nombreux types de tuyaux différents. Ce sont tous des tuyaux intégrés d'Angular. Quant à ce que sont les tuyaux intégrés et comment les faire. utilisez-les, ci-dessous. Démontrez-le via le code.

Time pipeline datedate

我们新建一个 Angular 项目，并且在页面中添加一个 new Date()：

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

页面就会显示当前的时间：

那么我们接下去就可以使用内置的管道来进行一个时间格式的转化，管道的语法需要在变量后面添加 | 符号，并且声明管道

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

这里我们用到了 date

Nous créons un nouveau projet Angular et ajoutons un new Date() à la page :

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

La page affichera le courant Heure :

Ensuite, nous pouvons utiliser le pipeline intégré pour convertir un format d'heure. La syntaxe du pipeline doit ajouter le symbole | après la variable et déclarer le pipeline

ng g p pipes/pipe-name

Ici, nous utilisons . date Ce pipeline, pour plus de détails sur les paramètres spécifiques du pipeline, vous pouvez lire la documentation officielle, qui présente tous les formats d'heure qu'il vous propose de convertir.

Angular - DatePipehttps://angular.cn/api/common/DatePipe#description

Après avoir configuré le pipeline, l'heure dans le navigateur a changé

Autres Pipes

Angular fournit également d'autres tuyaux, comme le tuyau pour changer le format de la devise (currency) :

Angular - CurrencyPipe

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

Il y a aussi un tube qui convertit les chaînes en majuscules (majuscules) :

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

---

Angular - UpperCasePipe

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

custom pipe

Nous en avons introduit plusieurs pipelines intégrés ci-dessus. Si les pipelines intégrés ne peuvent pas répondre à nos besoins de développement, Angular nous fournit également des pipelines personnalisés. Vous pouvez définir vous-même un pipeline et définir comment convertir l'entrée.

Nous pouvons générer rapidement un pipeline via la ligne de commande fournie par Angular :

  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>

Ici, j'ai créé un pipeline nommé test

Après avoir exécuté la commande ci-dessus, il sera sous src Créez un dossier de tuyaux pour vous , qui stocke vos pipes personnalisées

🎜🎜🎜🎜 Ensuite, Angular présentera automatiquement ces pipes pour vous dans l'application, afin que vous puissiez utiliser des pipes personnalisées partout dans le monde. 🎜🎜🎜🎜🎜Ensuite, vous voyez le tuyau sous le dossier tuyaux. Un tuyau est essentiellement une classe. Ici, un décorateur est utilisé pour lui donner un nom de tests. 🎜

在这个类里面我们需要去实现 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提供给了我们许多的内置管道，当内置管道不满足你的要求的时候，你还可以通过自定义管道来更加灵活的自定义输出格式

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!