管道快速入门

Angular 中 Pipe(管道) 与 Angular 1.x 中的 filter(过滤器) 的作用的是一样的。它们都是用来对输入的数据进行处理,如大小写转换、数值和日期格式化等。

内建管道及分类

  • String -> String
    • UpperCasePipe
    • LowerCasePipe
    • TitleCasePipe
  • Number -> String
    • DecimalPipe
    • PercentPipe
    • CurrencyPipe
  • Object -> String
    • JsonPipe
    • DatePipe
  • Tools
    • SlicePipe
    • AsyncPipe
    • I18nPluralPipe
    • I18nSelectPipe

内建管道使用示例

大写转换

-----
  -- ------------------- --------- - --------- ------
  ----- --------- - --------- ------ ---- ------- ------- ---
------

小写转换

-----
  -- ------------------- --------- - --------- ------
  ----- --------- - --------- ------ ---- ------- ------- ---
------

数值格式化

-----
  -- ------------------- ---------- - ------- ------- ------
  ----- ---------- - ------- ------- ------ ---- ------- ------ ---
------

日期格式化

-----
  -- ------------------- ----- - ----- ----------- ------
  ----- ----- - ----- ----------- ------ ---- ------- ------------------ -- ---
------

JavaScript 对象序列化

-----
  -- ------------------- - ----- ----------- - - ---- ------
  ----- - ----- ----------- - - ---- ------ ---- ------- - ------- ----------- - ---
------

管道参数

管道可以接收任意数量的参数,使用方式是在管道名称后面添加 : 和参数值。如 number: '1.4-4' ,若需要传递多个参数则参数之间用冒号隔开,具体示例如下:

-----
  -- ------------------- ----------- - --------- ------
  ----- ----------- - --------- ------ ---- ------- --- ---
------

管道链

我们可以将多个管道连接在一起,组成管道链对数据进行处理。

-----
  -- ------------------- ----------- - --------- - --------- ------
  ----- ----------- - --------- - --------- ------ ---- ------- --- ---
------

完整示例

------ - --------- - ---- ----------------

------------
  --------- ---------
  --------- -
    -----
      -- ------------------- --------- - --------- ------
      ----- --------- - --------- ------
    ------
    -----
      -- ------------------- --------- - --------- ------
      ----- --------- - --------- ------
    ------
    -----
      -- ------------------- ---------- - ------- ------- ------
      ----- ---------- - ------- ------- ------
    ------
    -----
      -- ------------------- ----- - ----- ----------- ------
      ----- ----- - ----- ----------- ------
    ------
    -----
      -- ------------------- - ----- ----------- - - ---- ------
      ----- - ----- ----------- - - ---- ------
    ------
    -----
      -- ------------------- ----------- - --------- ------
      ----- ----------- - --------- ------
    ------
    -----
      -- ------------------- ----------- - --------- - --------- ------
      ----- ----------- - --------- - --------- ------
    ------
  --
--
------ ----- ------------ -
  ----- - --- -------
-

自定义管道

自定义管道的步骤:

  • 使用 @Pipe 装饰器定义 Pipe 的 metadata 信息,如 Pipe 的名称 - 即 name 属性
  • 实现 PipeTransform 接口中定义的 transform 方法

WelcomePipe 定义

------ - ----- ------------- - ---- ----------------

------- ----- --------- --
------ ----- ----------- ---------- ------------- -
  ---------------- -------- ------ -
    ---------- ------ ------
    ------ ----- --- --------- -
      ----- --- -------------- ---- -------- --- --------------
    -
    ------ -------- -- - - ------
  -
- 

WelcomePipe 使用

-----
   -- ------------------- ----------- - ------- ------
   ----- ----------- - ------- ------ ---- ------- ------- -- --------- ---
------

当 WelcomePipe 的输入参数,即 value 值为非字符串时,如使用 123,则控制台将会抛出以下异常:

---------- ----- -- -------------- ----- ------------ - ------ ------------- ------ --- ------- ---- -------- --- -----------

RepeatPipe 定义

------ ------ -------------- ---- ----------------

------------ ----------
------ ----- ---------- ---------- ------------- -
    ---------------- ---- ------ ------- -
        ------ --------------------
    -
-

RepeatPipe 使用

-----
   -- ------------------- ---- - -------- ------
   ----- ---- - -------- ------ ---- ------- ------ ---
------

管道分类

  • pure 管道:仅当管道输入值变化的时候,才执行转换操作,默认的类型是 pure 类型。(备注:输入值变化是指原始数据类型如:string、number、boolean 等的数值或对象的引用值发生变化)
  • impure 管道:在每次变化检测期间都会执行,如鼠标点击或移动都会执行 impure 管道

总结

本文介绍了 Angular 中的常用内建管道的用法和管道的分类,同时也介绍了 pure 和 impure 管道的区别。 此外我们通过两个示例展示了如何自定义管道,最后详细分析了 RepeatPipe 管道的工作原理。建议读者更改 RepeatePipe 的 pure 属性为 false,体验一下 impure 管道。


上一篇:表单
下一篇:路由