Angular 7 管道

2025年3月17日 | 阅读 3 分钟

在 Angular 1 中，使用过滤器，后来在 Angular2 之后被称为管道。在 Angular 7 中，它被称为管道，用于转换数据。它用符号 | 表示。

语法

管道将整数、字符串、数组和日期作为输入，以 | 分隔。它将数据转换为所需的格式，并在浏览器中显示。

让我们看一个使用管道的例子。这里，我们使用管道以大写和小写显示标题文本。

示例

在 component.ts 文件中定义一个名为“title”的变量。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-first-app';
}

在 component.html 文件中使用管道符号。

<h1>
   {{ title | uppercase }} <br/></h1>
<h1>
  {{ title | lowercase }} <br/></h1>

输出

运行 ng serve 并查看结果。您将看到以下结果。

在这里，您可以看到管道已将标题更改为大写和小写。

Angular 7 内置管道

Angular 7 提供了一些内置管道

Lowercasepipe (小写管道)
Uppercasepipe (大写管道)
Datepipe (日期管道)
Currencypipe (货币管道)
Jsonpipe (JSON管道)
Percentpipe (百分比管道)
Decimalpipe (十进制管道)
Slicepipe (切片管道)

您已经看到了 lowercasepipe 和 uppercasepipe 的示例。现在，让我们看一些例子，看看其他管道是如何工作的。

示例

在 component.ts 文件中定义所需的变量。

component.ts 文件

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-first-app';
  todaydate = new Date();
  jsonval = {name: 'Alex', age: '25', address:{a1: 'Paris', a2: 'France'}};
  months = ['Jan', 'Feb', 'Mar', 'April', 'May', 'Jun',
    'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
}

在 component.html 文件中使用不同的内置管道符号

component.html 文件

<div style = "width:100%;">
  <div style = "width:40%;float:left;border:solid 1px black;">
    <h1>Uppercase Pipe</h1>
    <b>{{title | uppercase}}</b><br/>
    <h1>Lowercase Pipe</h1>
    <b>{{title | lowercase}}</b>
    <h1>Currency Pipe</h1>
    <b>{{6589.23 | currency:"USD"}}</b><br/>
    <b>{{6589.23 | currency:"USD":true}}</b> //Boolean true is used to get the sign of the currency.
    <h1>Date pipe</h1>
    <b>{{todaydate | date:'d/M/y'}}</b><br/>
    <b>{{todaydate | date:'shortTime'}}</b>
    <h1>Decimal Pipe</h1>
    <b>{{ 454.78787814 | number: '3.4-4' }}</b> // 3 is for main integer, 4 -4 are for integers to be displayed.
  </div>
  <div style = "width:40%;float:left;border:solid 1px black;">
    <h1>Json Pipe</h1>
    <b>{{ jsonval | json }}</b>
    <h1>Percent Pipe</h1>
    <b>{{00.54565 | percent}}</b>
    <h1>Slice Pipe</h1>
    <b>{{months | slice:2:6}}</b>
    // here 2 and 6 refers to the start and the end index
  </div>
</div> 

输出

您可以在此处看到所有内置管道的使用

如何创建自定义管道？

要创建自定义管道，请创建一个新的 ts 文件，并根据您必须完成的工作使用代码。您必须从 Angular/Core 导入 Pipe、PipeTransform。让我们创建一个 sqrt 自定义管道。

component.ts 文件

import {Pipe, PipeTransform} from '@angular/core';
@Pipe ({
  name : 'sqrt'
})
export class SqrtPipe implements PipeTransform {
  transform(val : number) : number {
    return Math.sqrt(val);
  }
}

现在，轮到更改 app.module.ts 了。创建一个名为 SqrtPipe 的类。该类将实现 PipeTransform。该类中定义的 transform 方法将以数字作为参数，并在求平方根后返回该数字。

因为我们创建了一个新文件，所以我们需要在 app.module.ts 中添加它。

Module.ts 文件

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

现在，在 component.html 文件中使用 sqrt 管道。

component.html 文件

<h1>Example of Custom Pipe</h1>
<h2>Square root of 625 is: {{625 | sqrt}}</h2><br/>
<h2>Square root of 169 is: {{169 | sqrt}}</h2> 

输出

Example of Custom Pipe
Square root of 625 is: {{625 | sqrt}}


Square root of 169 is: {{169 | sqrt}}

下一个主题Angular 7 表单

我们提供所有技术（如 Java 教程、Android、Java 框架）的教程和面试问题

联系信息

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

hr@tpointtech.com

+91-9599086977

关注我们

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Angular 2 教程

Angular 7 教程

Angular 7 指令

Angular 7 数据绑定

Angular 7 管道

错误修复

Angular 7 表单

Angular 其他

Angular + Spring

Angular 7 管道

语法

示例

Angular 7 内置管道

示例

如何创建自定义管道？

Example of Custom Pipe

Square root of 625 is: {{625 | sqrt}}

Square root of 169 is: {{169 | sqrt}}

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器