Angular7知识点4-----管道

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34414916/article/details/85167312

在Angular中我们可以使用下面命令来快速创建一个管道

ng generate pipe 管道名

例如，我要创建一个名叫helloworld的管道

ge generate pipe helloworld

这时，Angular CLI会在src/app目录下面创建两个文件：helloworld.pipe.ts，和helloworld.pipe.spec.ts（管道的测试文件）,不但如此，Angular CLI还会自动将该管道类加入AppModule的元数据对象的declarations数组中！

helloworld.pipe.ts内容如下


  
  
   
   
    
    
     
     
    
    
    
    
     
     
      
      import { Pipe, PipeTransform } 
      
      from 
      
      '@angular/core';
     
     
    
    
   
   
    
    
     
     
    
    
    
    
     
      
     
     
    
    
   
   
    
    
     
     
    
    
    
    
     
     
      
      @Pipe({
     
     
    
    
   
   
    
    
     
     
    
    
    
    
     
       
      
      name: 
      
      'helloworld'
     
     
    
    
   
   
    
    
     
     
    
    
    
    
     
     
      
      })
     
     
    
    
   
   
    
    
     
     
    
    
    
    
     
     
      
      export 
      
      class HelloworldPipe implements PipeTransform {
     
     
    
    
   
   
    
    
     
     
    
    
    
    
     
      
     
     
    
    
   
   
    
    
     
     
    
    
    
    
     
     
      
        transform(value: any, args?: any): any {
     
     
    
    
   
   
    
    
     
     
    
    
    
    
     
         
      
      return 
      
      null;
     
     
    
    
   
   
    
    
     
     
    
    
    
    
     
     
      
        }
     
     
    
    
   
   
    
    
     
     
    
    
    
    
     
      
     
     
    
    
   
   
    
    
     
     
    
    
    
    
     
     
      
      }

Angular中的管道是带有@Pipe装饰器的，紧接着该装饰器的类就是管道的管道类，官方文档中的管道部分的教程已经足够好而简洁，我在这里就直接引用了：管道

我在这里对管道先做一个简单的介绍

我们在模板中使用管道操作符——|（也就是一条竖线），来使用管道，例如，使用Angular内置的json管道来格式化输出：<p>{{ hero | json }} </p>就表示将hero这个对象输出为json格式，并显示在屏幕上
管道接受一个输入，我们可以对这个输入进行转化，并返回输出结果
我们可以使用Angular内置管道，也可以自己自定义管道，详细内容请参考官方教程：管道
我们可以串联一系列的管道，从而对数据进行一系列的转换，在这种情况下，前一个管道的输出是后一个管道的输入
管道可以接受参数，管道与参数、参数之间以:(冒号)的方式分隔

Angular7知识点4-----管道

猜你喜欢