构建自定义管道

2019-12-26 08:00:00 · 飞浪

Angular 管道根据我们的业务需求将数据转换为各种格式。让我们来看看构建自定义管道的过程。

介绍

Angular 是一个使用 JavaScript 创建单页应用程序的出色框架。它正以前所未有的速度发展，团队正在添加越来越多的功能来帮助开发人员制作各种形式的应用程序。

在 Angular 中需要学习很多概念。核心功能之一称为管道，用于根据业务需求将数据转换为各种格式。因此，让我们在本指南中了解管道和自定义管道。

Angular 中的管道是什么？

在我们进一步讨论之前，您应该知道并理解什么是管道，为什么要使用它，以及最重要的是，我们如何使用和创建我们自己的管道版本。

Angular 中的管道用于将数据转换为我们想要的特定形式或格式。我们传递需要转换的数据，管道返回可用于渲染到 DOM 中的处理后的数据。

管道就像魔术一样，可以将数据转换为特定的格式，而无需编写大量自定义逻辑，我们可以说这是一种即插即用的方法，我们只需使用管道名称，其余功能就可以在管道的单独文件中完成。

角管道类型

Angular 支持两种主要类型的管道，内置管道和自定义管道。内置管道是预先开发的管道，允许用户使用我们的数据，我们的数据将进行相应的转换。

Angular 中的管道来自@angular/common API，该API用于提供Angular中的基本指令和管道。

以下是 Angular 支持的一些内置管道。

标题大小写管道
小写管道
大写管道
日期管道
货币管道
十进制管道
异步管道
百分比管道
切片管道

还支持许多其他管道，可根据其名称执行特定的转换。

换句话说，管道只是一个接受值和其他参数并根据功能需求返回一些退出内容的函数。

在 Angular 中使用管道

到目前为止，我们已经了解了什么是管道以及支持的不同类型的管道。现在我们将学习如何在实际项目中使用管道来转换值。

要在模板中使用管道，我们应该使用管道符号（|），然后根据您的选择输入适当的管道名称。

以下是在 Angular 模板中使用管道的基本语法。

      {{‘value’ | pipe_name}}

例如，我们有一个字符串，需要将整个字符串转换为大写形式。如何使用管道来实现这一点？

这很简单。我们可以使用管道符号，后跟管道名称，如下所示：

      <p>
	{{ 'This is sample string' | uppercase }}
</p>
    

在这个简单的例子中，我们有一个普通的字符串语句，但是除了字符串之外，我们还使用了管道符号，后跟管道名称uppercase。这意味着我们的字符串值将被转发到管道，它将返回大写格式的完整字符串。

这就是我们在 Angular 中使用内置管道的方式。让我们看看将数据转换为其他各种格式的不同示例。

为此，打开文件app.component.ts文件并替换以下源代码。

      import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})

export class AppComponent {

  myDate = new Date();
  decimalNumber: number = 455.6656538467846;
  percentNumber: number = 2.5;
  moneyValue = 2580;
  myObj = ["Test 1", "Test 2", "Test 3", "Test 4", "Test 5"];

}
    

在此文件中，我们创建了一些用于不同目的的变量，每个变量都可以与单独的管道一起使用以处理这些变量的值。

现在打开app.component.html文件并粘贴以下源代码。

      <div>
        <!-- Date pipe -->
        <p>{{ myDate | date:'long' }}</p>
    
        <!-- Decimal pipe -->
        <p>{{ decimalNumber | number:'3.2-5' }}</p>
    
        <!-- Percent pipe -->
        <p>{{ percentNumber | percent:'2.2-5' }}</p>
    
        <!-- Currency pipe -->
        <p>{{ moneyValue | currency:'INR' }}</p>
        <p>{{ moneyValue | currency:'USD' }}</p>
    
        <!-- Keyvalue pipe -->
    	<div *ngFor="let item of myObj | keyvalue">
            Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
        </div>
</div>
    

正如您在上面的例子中看到的，我们使用了五种不同类型的管道，以及来自下面列出的组件的值。

枣管
十进制管道
百分比管
货币管道
键值管道

如果您注意到上面的示例，我们使用了管道名称以及各种属性，例如“INR”\ 和“long”。这些属性用于有条件地转换值。换句话说，将值更具体地修改为所需的格式会很有帮助。

到目前为止，我们已经介绍了内置管道，并学习了如何使用内置管道，但如果这些内置管道无法满足我们的需求怎么办？不用担心，我们也可以在 Angular 中创建一个自定义管道，该管道可以根据我们的功能要求为值提供标准转换。

Angular 中的自定义管道是什么？

Angular 支持大量内置管道，用于将数据转换为特定格式，需要记住的是，这些管道具体到单一功能及其局限性。

但是如果我们想根据自定义要求进行数据转换，那么我们需要创建自己的管道来满足我们的要求。

自定义管道只不过是一个接受值和其他参数来处理数据并返回转换后的值的函数。

首先，我们需要创建管道。我们可以使用 CLI 命令创建它，如下所示。

      Ng generate pipe pipe_name

我们只需要给出管道的名称，就可以了。现在让我们创建一个管道来玩。

      Ng generate pipe mycustompipe

在命令行中执行上述命令后，将会创建一个名为mycustompipe.pipe.ts的新文件，其内容应如下所示。

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

@Pipe({
  name: "mycustompipe"
})

export class MycustompipePipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return;
  }

}
    

这里我们有一个名为MycustompipePipe的自定义管道类，它实现了名为PipeTransform的接口，用于在 Angular 中使用管道转换数据。

还有一个名为transform()的方法，它是自定义管道背后的真正魔力，它接受需要与其他参数一起转换的实际值。

让我们使用自定义管道并查看我们得到的参数。

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

@Pipe({
  name: "mycustompipe"
})

export class MycustompipePipe implements PipeTransform {

  transform(value: any, args?: any): any {
    console.log("Basic Value :", value);
    console.log("Additional arguments:", args);
    return value;
  }

}
    

在此示例中，我们仅使用了两个不同的控制台语句来打印从模板获取的值和参数。打开模板文件app.component.html并粘贴这些行。

      <p> {{ 'This is testing string' | mycustompipe:'true' }}</p>
<p> {{ 'This is testing string' | mycustompipe:'false' }}</p>
    

如果您打开浏览器控制台，那么您将看到该值以及管道提供的参数。

例子

我们已经创建了自定义管道并获取了值和参数。现在让我们看一个实例，我们将根据参数添加{ }或{ { }}以及实际字符串值。

让我们修改自定义管道mycustompipe.pipe.ts，它看起来像这样。

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

@Pipe({
  name: "mycustompipe"
})

export class MycustompipePipe implements PipeTransform {
  transform(value: any, args?: any): any {
    console.log("Basic Value :", value);
    console.log("Additional arguments:", args);

    if (value === "") {
      return "";
    }
    if(args === 'true') {
      return '{ ' + value + ' }'
    }
     if(args === 'false') {
      return '{{' + value + '}}'
    }
    return value;
  }
}
    

在此示例中，我们有三个不同的 if 条件。

第一个条件检查值是否为空
第二个条件用于验证我们得到的参数是否为真，然后它会在字符串前后添加{ }符号
第三个条件检查参数是否为假，如果匹配，我们将在值之前和之后添加{ {和}}

最后，如果没有执行任何条件，那么我们将返回从模板中获取的标准值。

现在我们的例子已经完成了。让我们运行这个演示代码，你将得到类似这样的输出。

这里，我们有两个不同的语句，一个以真为参数，另一个以假为参数。因此，根据条件，值将转换为不同的格式，我们将从管道本身获取新重塑的值。

这就是我们如何通过仅提供值以及各种参数来创建自定义管道，以便我们能够更好地转换我们的价值。

结论

在本指南中，我们了解了什么是管道以及不同类型的管道：内置管道和自定义管道，用于获取值并根据用户要求进行转换。

管道是 Angular 中的一个便捷功能，它引入了有效的数据转换，而无需我们自行配置所有内容。自定义管道在自定义数据转换方面非常神奇。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

构建自定义管道

杭州电子商务研究院

5年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import { Component } from "@angular/core"; @Component({ selector: "my-app", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent { myDate = new Date(); decimalNumber: number = 455.6656538467846; percentNumber: number = 2.5; moneyValue = 2580; myObj = ["Test 1", "Test 2", "Test 3", "Test 4", "Test 5"]; }

<div>  <p>{{ myDate | date:'long' }}</p>  <p>{{ decimalNumber | number:'3.2-5' }}</p>  <p>{{ percentNumber | percent:'2.2-5' }}</p>  <p>{{ moneyValue | currency:'INR' }}</p> <p>{{ moneyValue | currency:'USD' }}</p>  <div *ngFor="let item of myObj | keyvalue"> Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b> </div> </div>

import { Pipe, PipeTransform } from "@angular/core"; @Pipe({ name: "mycustompipe" }) export class MycustompipePipe implements PipeTransform { transform(value: any, args?: any): any { return; } }

import { Pipe, PipeTransform } from "@angular/core"; @Pipe({ name: "mycustompipe" }) export class MycustompipePipe implements PipeTransform { transform(value: any, args?: any): any { console.log("Basic Value :", value); console.log("Additional arguments:", args); if (value === "") { return ""; } if(args === 'true') { return '{ ' + value + ' }' } if(args === 'false') { return '{{' + value + '}}' } return value; } }