本文共 835 字，大约阅读时间需要 2 分钟。

一、模板表达式操作符

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

二、管道操作符 (|)

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

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

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

Angular 的常用内置管道函数：

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

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

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

   
      Title through a pipe chain:  {
  {title | uppercase | lowercase}}
   

   
    
    
{
  {title|uppercase }}
    
    
{
  {title|uppercase|lowercase }}
    
    
{
  {this|json}}
    
    
{
  {time|date:'yyyy-MM-dd'}}
    
    
{
  {number|percent}}
    
    
{
  {number|currency:'CNY'}}
  
   

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

更多：