使用管道

像过滤器一样,管道也将数据作为输入,并将其转换为所需的输出。使用管道的基本示例如下所示:

  1. import {Component} from '@angular/core';
  2. @Component({
  3. selector: 'product-price',
  4. template: `<p>Total price of product is {{ price | currency }}</p>`
  5. })
  6. export class ProductPrice {
  7. price: number = 100.1234;
  8. }

查看示例

传递参数

管道可以接受可选参数以修改输出。要将参数传递到管道,只需在管道表达式的末尾添加冒号和参数值: pipeName: parameterValue 你也可以这样传递多个参数: pipeName: parameter1: parameter2

  1. import {Component} from '@angular/core';
  2. @Component({
  3. selector: 'product-price',
  4. template: '<p>Total price of product is {{ price | currency: "CAD": true: "1.2-4" }}</p>'
  5. })
  6. export class ProductPrice {
  7. price: number = 100.123456;
  8. }

View Example

链接管道

链接管道

我们可以将多个管道连接在一起,以便在一个表达式中使用多个管道。

  1. import {Component} from '@angular/core';
  2. @Component({
  3. selector: 'product-price',
  4. template: '<p>Total price of product is {{ price | currency: "CAD": true: "1.2-4" | lowercase }}</p>'
  5. })
  6. export class ProductPrice {
  7. price: number = 100.123456;
  8. }

View Example