开发学院

您的位置:首页>教程>正文

教程正文

Angular 6 管道

  在本章中,我们将讨论Angular 6 中的管道,管道在Angular1中被称为过滤器,在Angular 2中被称为管道。

  |字符用于转换数据。以下是语法

{{ Welcome to Angular 6 | 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 6 Project!';
}
  app.component.html文件中的代码。
<b>{{title | uppercase}}</b><br/>
<b>{{title | lowercase}}</b>

  浏览器显示的结果如图:

uppercase_lowercase.jpg

  Angular 6提供了一些内置管道。管道如下所示:

  • 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 6 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>

  以下截图显示了管道的输出:

output_for_each_pipe.jpg

output_for_each_pipe2.jpg

如何自定义管道?

  为了创建自定义管道,我们需要创建一个新的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和Pipe Transform。在@Pipe指令中,我们必须给我们的管道命名,这将在我们的html文件中使用。因为我们正在创建sqrt管道,所以我们将命名它为sqrt。

  接下来我们必须创建类,类名为SqrtPipe。这个类将实现PipeTransform。

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

  我们需要向app.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 { }

  我们已经创建了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.jpg