Angular管道操作符(|)

忘是亡心i 2022-06-04 05:23 218阅读 0赞

**一、模板表达式操作符**

模板表达式语言使用了JavaScript 语法的子集，并补充了几个用于特定场景的特殊操作符：管道操作符、安全导航操作符。

**二、管道操作符 (|)**

在绑定之前，表达式的结果可能需要一些转换。例如，可能希望吧数字显示成金额、强制文本变成大写，或者过滤列表以及进行排序。

Angular 管道对象这样的小型转换来说是个很方便的选择。

管道是一个简单的函数，它接受一个输入值，并返回转换结果。

**Angular 的常用内置管道函数：**

DatePipe，UpperCasePipe，LowerCasePipe，CurrencyPipi，PercentPipe，JsonPipe等。

它们用于模板表达式中，只要使用**管道操作符(|)** 就行了。

管道操作符会把它左侧的表达式结果传给它右侧的管道函数。还可以通过多个管道串联表达式。

<div>
      Title through a pipe chain:
      {
       {title | uppercase | lowercase}}
    </div>

常用实例：

<div class="alert alert-warning">
        <p>{
       {title|uppercase }}</p>
        <p>{
       {title|uppercase|lowercase }}</p>
        <p>{
       {this|json}}</p>
        <p>{
       {time|date:'yyyy-MM-dd'}}</p>
        <p>{
       {number|percent}}</p>
        <p>{
       {number|currency:'CNY'}}</p>
      </div>

ts 属性：

export class AppComponent {
      title = 'app';
      name = '张三丰';
    
      time = new Date();
      number = 1.123;
    
      show(str: string) {
        str += '---测试';
        return str;
      }
    }

显示结果：

![Center][]

[Angular 安全导航操作符(?.)和空属性路径][Angular _.]

[Angular2开发环境搭建之VS Code][Angular2_VS Code]

[Angular CLI简介2][Angular CLI_2]

[Center]: /images/20220604/cbfcdf4ce7884986a932e02caf9ab56c.png
[Angular _.]: http://blog.csdn.net/u011127019/article/details/78720520
[Angular2_VS Code]: http://blog.csdn.net/u011127019/article/details/78680956
[Angular CLI_2]: http://blog.csdn.net/u011127019/article/details/78662242