开始使用Angular 11自定义管道

在本教程中，我们将带领大家了解使用这些管道来转换显示数据的过程，以及如何创建我们的自定义管道来满足我们的需求。

在开发Angular应用程序时，可能会出现这样的情况：你需要在HTML模板上转换或格式化你的显示数据。

简介

例如，你可能需要以美元或其他货币来显示产品的价格。Angular提供了内置的管道，我们可以用它来格式化我们的数据。

目标

在本教程结束时，你应该能够使用内置的Angular管道来格式化HTML模板上的显示数据，以及创建你自己的Angular自定义管道。

前提条件

• 你至少应该有Angular 2+的基本知识。在这篇文章中，我们将使用Angular 12.0.3。
• Angular HTML模板和Angular CLI。

开始使用Angular 12管道

Angular管道是用| 字符表示的，如下图所示。

{{I'LL BE DISPLAYED ON SCREEN IN LOWERCASE | lowercase }}

在上面的语法中，我们有两个部分，要格式化的文本和管道。当这段代码被执行时，文本I'LL BE DISPLAYED ON SCREEN IN LOWERCASE ，将以小写显示。就这样了。

还需要注意的是，Angular管道接受不同类型的数据，包括数组、日期、字符串和整数。

在下一节，我们来看看涉及Angular内置管道的例子。

使用内置的Angular管道对HTML模板数据进行格式化

让我们从创建Angular 12应用程序开始，custom-angular-pipes 。如果你已经安装了一个应用程序，你可以跳过这一部分。

ng new custom-angular-pipes

cd custom-angular-pipes

ng serve

现在我们已经准备好了一个应用程序，打开你的浏览器并输入以下内容。

http://localhost:4200

输出。

现在，在src/app/ 目录中打开app.component.ts 文件并添加以下内容。

..........................................

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myText = "This is my first Angular 12 pipe example";
}
..........................................

保存并打开src/app/ 目录下的app.component.ts 文件，并添加以下标记。

<div style="text-align:center">
  <img width="200" alt="Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">

  <div style="padding-top: 50px">
    To Uppercase:
    <p>{{myText | uppercase}}</p>
  </div>

  <div style="padding-top: 50px">
    To Lowercase:
    <p>
      {{myText | lowercase}}
    </p>
  </div>
</div>

输出。

在上面的脚本中，你会发现在执行你的代码时，屏幕上显示的文字取决于所使用的管道类型。

让我们快速浏览一下货币管道，以及我们如何定制它以获取你想要的货币。

在你的app.component.ts 文件中添加以下内容。

....................................
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  totalAmount = 1000;
}
.................................

将以下内容添加到模板中。

<div style="text-align:center">
  <img width="200" alt="Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">

  <div style="padding-top: 50px">
    Defaults to USD:
    <p>{{totalAmount | currency}}</p>
  </div>

  <div style="padding-top: 50px">
   Format To Kenyan Shillings:
    <p>
      {{totalAmount | currency: 'KES '}}
    </p>
  </div>

</div>

输出。

在上面的货币管道例子中，我们已经看到我们如何定制货币管道，以适应我们想要使用的任何货币，因为它默认为美元。

Angular有几个内置的管道，我们可以用它来格式化模板中的数据。

创建自定义管道

现在我们已经看到了如何使用内置管道，现在让我们来创建Angular没有提供的管道。

在这个例子中，我们将创建一个Angular管道，以使我们的文本大写。

在终端上运行以下命令。

 ng g pipe capitalize

输出。

CREATE src/app/capitalize.pipe.spec.ts (203 bytes)
CREATE src/app/capitalize.pipe.ts (225 bytes)
UPDATE src/app/app.module.ts (465 bytes)

它自动在src/app/app.module.ts 中添加这个管道。

........................................................
import { CapitalizePipe } from './capitalize.pipe';

@NgModule({
  declarations: [
    AppComponent,
    CapitalizePipe
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
...................................................

现在打开src/app/ 目录中的capitalize.ts 文件，将其内容替换为以下内容。

...............................................
@Pipe({
  name: 'capitalize'
})
export class CapitalizePipe implements PipeTransform {

  transform(text: string): string {
    return text[0].toUpperCase() + text.substr(1).toLowerCase();
  }
}
....................................................

要使用这个新的管道，请到模板上，用新的管道替换它之前的内容，如下图所示。

...................................
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myText = 'my testing file';
}
..........................

<div style="text-align:center">
  <img width="200" alt="Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">


  <div style="padding-top: 50px">
    <p>
      {{myText | capitalize}}
    </p>
  </div>

</div>

输出。

在上面的代码片断中，我们已经创建了一个自定义的管道，将我们的文本转换为大写。

总结

在本教程中，我们已经讨论了一些概念，从Angular的安装到管道的创建。我们已经看到我们如何使用内置的管道来格式化我们在HTML模板中显示的数据。

我们还研究了Angular自定义管道的创建，这些管道在默认情况下并不与Angular一起提供。