当前位置： 正文

Angular教程 – 内置Pipe管道：Uppercase 与 Lowercase字符串大小写转换

Angular 2021-07-25

Angular教程 - 内置Pipe管道：Uppercase 与 Lowercase字符串大小写转换

Pipe，是在 Angular 中的一个好用的功能，其使用是在 template 使用，加上 | 这个符号，后面放上函数方法名称，就可以直接使用并渲染于网页上。

管道用来对字符串、货币金额、日期和其他显示数据进行和格式化。管道是一些简单的函数，可以用来接受输入值并返回一个后的值。例如，你可以使用一个 Pipe 把日期显示为 2021年 7 月 25 日，而不是其原始字符串格式。

Angular为典型的数据转换提供了内置的管道，包括国际化的转换（i18n），它使用本地化信息来格式化数据。数据格式化常用的内置管道如下：

  • DatePipe：根据本地环境中的规则格式化日期值。
  • UpperCasePipe：把文字全部转换成。
  • LowerCasePipe ：把文字全部转换成。
  • CurrencyPipe ：把数字转换成货币字符串，根据本地环境中的规则进行格式化。
  • DecimalPipe：把数字转换成带小数点的字符串，根据本地环境中的规则进行格式化。
  • PercentPipe ：把数字转换成百分比字符串，根据本地环境中的规则进行格式化。

与

把下方 template 的英文字母，全部转成大写或小写。

HTML

<h2>{{title}}</h2>
export class AppComponent {
  title = "This is Angular Practice";
}

要应用管道，请如下所示在模板表达式中使用管道操作符（|），紧接着是该管道的名字。 | uppercase 或是 | lowercase 就会把标题全部改成大写或是小写啰~!!

<h2>{{title | uppercase}}</h2>
<h2>{{title | lowercase}}</h2>

Demo

赏