Angular7:管道
在本章中,我们将讨论角度7中的管道。管道在Angular 1被称为过滤器,从Angular 2开始被称为管道。
|字符用于转换数据。以下是管道的语法
{{ 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自带了一些管道:
Lowercasepipe
Uppercasepipe
Datepipe
Currencypipe
Jsonpipe
Percentpipe
Decimalpipe
Slicepipe
我们已经看到了lowercase和uppercase管道。现在让我们看看其他管道是如何工作的。下面一行代码将帮助我们在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>
下面图片显示了每个管道的输出
如何创建自定义管道?
为了创建自定义管道,我们创建了一个新的ts文件。在这里,我们想要创建sqrt自定义管道。我们给该文件取了相同的名称,如下所示
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指令中,我们必须给我们的管道命名,它将用在我们的html文件。因为我们正在创建sqrt管道,所以我们将它命名为sqrt。
接下来,我们需要创建类,并且类名是SqrtPipe。这个类将实现管道转换。
类中定义的转换方法将参数作为数字,并在取平方根后返回数字。
因为我们已经创建了一个新文件,所以我们需要在应用程序模块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>
输出如下: