Qu'est-ce qu'un pipeline ? Une brève analyse des pipelines (PIPE) dans Angular

Qu'est-ce qu'un pipeline ? Cet article vous présentera le pipeline (PIPE) dans Angular et expliquera comment personnaliser le pipeline. 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. [Recommandation de didacticiel connexe : "Tutoriel angulaire"]

En termes simples, Angular Pipes peut nous aider à convertir nos entrées, y compris les chaînes, les entiers, les dates, etc., dans des formats spécifiques en fonction de nos besoins et à les afficher 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 utiliser. eux, passons en revue Faisons une démonstration du 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 l'heure actuelle ：

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. Pour ce pipeline, vous pouvez lire la documentation officielle pour plus de détails sur les paramètres spécifiques du pipeline, 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 (devise) :

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

dans 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 Vous créez un dossier de tuyaux, qui stocke vos tuyaux personnalisés

🎜🎜, puis Angular présentera automatiquement ces tuyaux pour vous dans l'application, afin que vous puissiez utiliser des tuyaux personnalisés 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. 🎜🎜Dans cette classe, nous devons implémenter l'interface PipeTransfrom, ce qui signifie que nous devons avoir la méthode de transformation. Dans cette méthode, le premier paramètre est l'entrée à mettre dans le pipeline, et la seconde donnée est le paramètre auquel nous passons. le pipeline. et placez-le dans un tableau du pipeline. 🎜

这个 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!