Angular 8 管道

管道被称为过滤器。它有助于在插值内转换数据和管理数据，用 {{ | }}。它接受数据、数组、整数和字符串作为输入，用“|”符号分隔。本章详细介绍了管道。

添加参数

在你的 测试组件.ts file.

export class TestComponent { 
    presentDate = new Date();
}

现在，在 test.component.html 文件中添加以下代码。

<div> 
    Today's date :- {{presentDate}}
</div>

现在，运行应用程序，它将显示以下输出：

Today's date :- Mon Jun 15 2020 10订阅一个 observable 并返回传输的值。05 GMT+0530 (IST)

Here,

Date object is converted into easily readable format.

添加日期管道

让我们在上面的 html 文件中添加日期管道。

<div> 
    Today's date :- {{presentDate | date }}
</div>

你可以看到下面的输出：

Today's date :- Jun 15, 2020

日期中的参数

我们可以使用 : 字符在管道中添加参数。我们可以使用此参数显示短日期、完整日期或格式化日期。将以下代码添加到 test.component.html file.

<div> 
    short date :- {{presentDate | date:'shortDate' }} <br/>
    Full date :- {{presentDate | date:'fullDate' }} <br/>
    Formatted date:- {{presentDate | date:'M/dd/yyyy'}} <br/>
    Hours and minutes:- {{presentDate | date:'h:mm'}}
</div>

你可以在屏幕上看到以下响应：

short date :- 6/15/20 
Full date :- Monday, June 15, 2020 
Formatted date:- 6/15/2020 
Hours and minutes:- 12:00

链式管道

我们可以将多个管道组合在一起。当场景与多个必须应用于数据转换的管道相关联时，这将很有用。

在上面的例子中，如果你想用大写字母显示日期，那么我们可以同时应用 Date and 大写管在一起。

<div> 
    Date with uppercase :- {{presentDate | date:'fullDate' | uppercase}} <br/>
    Date with lowercase :- {{presentDate | date:'medium' | lowercase}} <br/>
</div>

你可以在屏幕上看到以下响应：

Date with uppercase :- MONDAY, JUNE 15, 2020 Date with lowercase :- jun 15, 2020, 12:00:00 am

Here,

Date, Uppercase and Lowercase are pre-defined pipes. Let’s understand other types of built-in pipes in next section.

内置管道

Angular 8 支持以下内置管道。我们将一一进行简要讨论。

异步管道

如果数据以 observables 的形式出现，那么 异步管道 订阅一个 observable 并返回传输的值。

import { Observable, Observer } from 'rxjs';
export class TestComponent implements OnInit {
    timeChange = new Observable<string>((observer: Observer>string>) => {
        setInterval(() => observer.next(new
        Date().toString()), 1000);
    });
}

Here,

The Async 管道每隔一秒执行一次时间变化的订阅，并在传递给它时返回结果。主要优点是，如果组件被删除，我们不需要在 timeChange 上调用 subscribe 并且不用担心取消订阅。

在 test.component.html 中添加以下代码。

<div> 
    Seconds changing in Time: {{ timeChange | async }}
</div>

现在，运行应用程序，你可以看到屏幕上的秒数变化。

货币管道

它用于将给定的数字转换为各种国家的货币格式。考虑下面的代码 测试组件.ts file.

import { Component, OnInit } from '@angular/core'; @Component({ 
    selector: 'app-test',
    template: `
    <div style="text-align:center">
        <h3> Currency Pipe</h3>
        <p>{{ price | currency:'EUR':true}}</p>
        <p>{{ price | currency:'INR' }}</p>
    </div>
    `,
    styleUrls: ['./test.component.scss']
}) 
export class TestComponent implements OnInit { 
    price : number = 20000; ngOnInit() {

    }
}

你可以在屏幕上看到以下输出：

Currency Pipe

€20,000.00 
₹20,000.00

切片管

切片管道用于返回数组的切片。它将索引作为参数。如果你只分配起始索引，则意味着它将打印到值的末尾。如果要打印特定范围的值，那么我们可以分配开始和结束索引。

我们还可以使用负索引来访问元素。简单示例如下图：

测试组件.ts

import { Component, OnInit } from '@angular/core'; @Component({ 
    selector: 'app-test',
    template: `
    <div>
        <h3>Start index:- {{Fruits | slice:2}}</h3>
        <h4>Start and end index:- {{Fruits | slice管道被称为过滤器。它有助于在插值内转换数据和管理数据，用 {{ | }}。它接受数据、数组、整数和字符串作为输入，用“|”符号分隔。本章详细介绍了管道。4}}</h4>
        <h5>Negative index:- {{Fruits | slice:-2}}</h5>
        <h6>Negative start and end index:- {{Fruits | slice:-4:-2}}</h6>
    </div>
    `,
    styleUrls: ['./test.component.scss']
}) 
export class TestComponent implements OnInit { 
    Fruits = ["Apple","Orange","Grapes","Mango","Kiwi","Pomegranate"];
    ngOnInit() {

    }
}

现在运行你的应用程序，你可以在屏幕上看到以下输出：

Start index:- Grapes,Mango,Kiwi,Pomegranate
Start and end index:- Orange,Grapes,Mango 
Negative index:- Kiwi,Pomegranate 
Negative start and end index:- Grapes,Mango

Here,

{{水果 |切片：2}} 表示从第二个索引值 Grapes 开始到值结束。
{{水果 |切片：1:4}} 表示从 1 到 end-1，因此结果是一到第三个索引值。
{{水果 |切片：-2}} 表示从 -2 到结束，因为没有指定结束值。因此结果是猕猴桃，石榴。
{{水果 |切片：-4:-2}} 表示从负索引 -4 开始是 Grapes 到 end-1 是 -3 所以 index[-4,-3] 的结果是 Grapes, Mango。

十进制管道

它用于格式化十进制值。它也被认为是 CommonModule。让我们理解一个简单的代码 测试组件.ts file,

import { Component, OnInit } from '@angular/core'; @Component({ 
    selector: 'app-test',
    template: `
    <div style="text-align:center">
        <h3>Decimal Pipe</h3>
        <p> {{decimalNum1 | number}} </p>
        <p> {{decimalNum2 | number}} </p>
    </div>
    `,
    styleUrls: ['./test.component.scss']
}) 
export class TestComponent implements OnInit { 
    decimalNum1: number = 8.7589623;
    decimalNum2: number = 5.43;
    ngOnInit() {

    }
}

你可以在屏幕上看到以下输出：

Decimal Pipe 
8.759 
5.43

格式化值

我们可以在数字模式中应用字符串格式。它基于以下格式：

number:"{minimumIntegerDigits}.{minimumFractionDigits} - {maximumFractionDigits}"

让我们在代码中应用上述格式，

@Component({ 
    template: `
    <div style="text-align:center">
        <p> Apply formatting:- {{decimalNum1 | number:'3.1'}} </p>
        <p> Apply formatting:- {{decimalNum1 | number:'2.1-4'}} </p>
    </div>
    `,
})

Here,

{{十进制数1 |编号：'3.1'}} 表示小数点后三位和最小一个小数，但对最大小数限制没有限制。它返回以下输出：

Apply formatting:- 008.759

{{十进制数1 |编号：'2.1-4'}} 表示两位小数，允许最小一位和最多四位小数，因此它返回以下输出：

Apply formatting:- 08.759

百分管

它用于将数字格式化为百分比。格式化字符串与 DecimalPipe 概念相同。简单示例如下图：

import { Component, OnInit } from '@angular/core'; 
@Component({ 
    selector: 'app-test',
    template: `
    <div style="text-align:center">
        <h3>Decimal Pipe</h3>
        <p> {{decimalNum1 | percent:'2.2'}} </p>
    </div>
    `,
    styleUrls: ['./test.component.scss']
}) 
export class TestComponent { 
    decimalNum1: number = 0.8178;
}

你可以在屏幕上看到以下输出：

Decimal Pipe 
81.78%

JsonPipe

它用于将 JavaScript 对象转换为 JSON 字符串。将以下代码添加到 测试组件.ts 文件如下：

import { Component, OnInit } from '@angular/core'; 
@Component({ 
    selector: 'app-test',
    template: `
    <div style="text-align:center">
        <p ngNonBindable>{{ jsonData }}</p> (1)
        <p>{{ jsonData }}</p>
        <p ngNonBindable>{{ jsonData | json }}</p>
        <p>{{ jsonData | json }}</p>
    </div>
    `,
    styleUrls: ['./test.component.scss']
}) 
export class TestComponent { 
    jsonData = { id: 'one', name: { username: 'user1' }}
}

现在，运行应用程序，你可以在屏幕上看到以下输出：

{{ jsonData }} 
(1) 
[object Object] 
{{ jsonData | json }} 
{ "id": "one", "name": { "username": "user1" } }

创建自定义管道

正如我们已经看到的，Angular 8 中有许多预定义的管道可用，但有时，我们可能希望以自定义格式转换值。本节介绍如何创建自定义管道。

使用以下命令创建自定义管道：

ng g pipe digitcount

执行上述命令后，可以看到响应：

CREATE src/app/digitcount.pipe.spec.ts (203 bytes) CREATE src/app/digitcount.pipe.ts (213 bytes) 
UPDATE src/app/app.module.ts (744 bytes)

让我们创建一个使用 Pipe 计算数字中位数的逻辑。打开 digitcount.pipe.ts 文件并添加以下代码：

import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ 
    name: 'digitcount'
}) 
export class DigitcountPipe implements PipeTransform { 
    transform(val : number) : number {
        return val.toString().length;
    }
}

现在，我们添加了计算数字中位数的逻辑。让我们添加最后的代码 测试组件.ts 文件如下：

import { Component, OnInit } from '@angular/core'; @Component({ 
    selector: 'app-test',
    template: `
    <div>
        <p> DigitCount Pipe </p>
        <h1>{{ digits | digitcount }}</h1>
    </div>
    `,
    styleUrls: ['./test.component.scss']
}) 
export class TestComponent implements OnInit { 
    digits : number = 100;
    ngOnInit() {
    }
}

现在，运行应用程序，你可以看到以下响应：

DigitCount Pipe 
3

工作示例

让我们在 ExpenseManager 应用程序中使用管道。

打开命令提示符并转到项目根文件夹。

cd /go/to/expense-manager

启动应用程序。

ng serve

Open ExpenseEntryListComponent 的 模板， src/app/expense-entry-list/expense-entry-list.component.html 并包括管道 entry.spendOn 如下所述：

<td>{{ entry.spendOn | date: 'short' }}</td>

在这里，我们使用日期管道以短格式显示日期的支出。

最后，应用程序的输出如下图所示：

< 上一篇（Angular 8 指令）

下一篇（Angular 8 反应式编程） >

Angular 8 教程

Angular 8 管道

添加参数

添加日期管道

日期中的参数

链式管道

内置管道

异步管道

货币管道

切片管

十进制管道

格式化值

百分管

JsonPipe

创建自定义管道

工作示例