Angular7 - 管道(Pipes)

首页 / Angular7入门教程 / Angular7 - 管道(Pipes)

在本章中,我们将讨论Angular 7中的Pipes。在Angular1中,管道以前被称为过滤器,从Angular2开始又称为管道。

|字符用于转换数据。以下是相同的语法-

{{ Welcome to Angular 7 | lowercase}}

它使用整数,字符串,数组和日期作为输入,并用|分隔,转换为所需格式并在浏览器中显示。

在app.component.ts文件中,我们定义了title变量,如下所示:

app.component.ts

import { Component } from '@angular/core';
@Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
}) 
export class AppComponent {
   title='Angular 7 Project!'; 
}

以下代码行进入 app.component.html 文件-

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

浏览器出现,如以下屏幕截图所示-

Angular Project

这是一些内置管道-

  • Lowercasepipe
  • Uppercasepipe
  • Datepipe
  • Currencypipe
  • Jsonpipe
  • Percentpipe
  • Decimalpipe
  • Slicepipe

我们已经看到了小写和大写的管道,现在让我们看看其他管道如何工作,以下代码行将帮助我们在 app.component.ts 文件中定义所需的变量-

import { Component } from '@angular/core';
@Component({ 
   selector: 'app-root',
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
})
export class AppComponent {
   title='Angular 7 Project!'; 
   todaydate=new Date(); 
   jsonval={name:'Rox', age:'25', address:{a1:'Mumbai', a2:'Karnataka'}}; 
   months=["Jan", "Feb", "Mar", "April", "May", "Jun", "July", "Aug", 
      "Sept", "Oct", "Nov", "Dec"]; 
}

我们将使用 app.component.html 文件中的管道,如下所示-

<!--The content below is only a placeholder and can be replaced.--> 
<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>

以下屏幕截图显示了每个管道的输出-

Uppercase

如何创建自定义管道?

为了创建自定义管道,我们创建了一个新的ts文件,在这里,我们要创建sqrt自定义管道,我们给文件起了相同的名称,它看起来如下:

链接:https://www.learnfk.comhttps://www.learnfk.com/angular7/angular7-pipes.html

来源:LearnFk无涯教程网

app.sqrt.ts

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

要创建自定义管道,我们必须从Angular/core导入" Pipe and Pipe Transform"。在@Pipe指令中,我们必须为管道指定名称,该名称将在我们的.html文件中使用。由于我们正在创建sqrt管道,因此将其命名为sqrt。

继续进行时,我们必须创建类,并且类名称为SqrtPipe。此类将实现PipeTransform。

类中定义的transform方法将参数作为数字,并在取平方根后返回数字。

由于创建了新文件,因此需要在 app.module.ts 中添加相同的文件。这样做如下-

无涯教程网

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
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, 
      AppRoutingModule
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

我们已经创建了 app.sqrt.ts 类,我们必须将其导入 app.module.ts 并指定文件的路径,如上所示,它也必须包含在声明中。

现在让我们在 app.component.html 文件中查看对sqrt管道的调用。

<h1>Custom Pipe</h1> 
<b>Square root of 25 is: {{25 | sqrt}}</b> 
<br/> 
<b>Square root of 729 is: {{729 | sqrt}}</b>

以下是输出-

Custom Pipe

这一章《Angular7 - 管道(Pipes)》你学到了什么?在下面做个笔记吧!做站不易,你的分享是对我们最大的支持

猜你喜欢

人工智能基础课 -〔王天一〕

后端存储实战课 -〔李玥〕

遗留系统现代化实战 -〔姚琪琳〕

Go进阶 · 分布式爬虫实战 -〔郑建勋〕

好记忆不如烂笔头。留下你的足迹吧 :)