AngularJS 4(五)【管道】

左手的ㄟ右手 2021-06-26 16:06 383阅读 0赞

## 管道 ##

用来转换数据渲染的格式，在 1.x 版本的时候称之为过滤器，在 4.x 称之为管道。

## 使用 ##

格式：`date_expression | date[:format[:timezone[:locale]]]`

#### 大写转换 ####

<div>
      <p ngNonBindable>{
       { 'Angular' | uppercase }}</p>
      <p>{
       { 'Angular' | uppercase }}</p> 
    </div>

#### 小写转换 ####

<div>
      <p ngNonBindable>{
       { 'Angular' | lowercase }}</p>
      <p>{
       { 'Angular' | lowercase }}</p> 
    </div>

#### JavaScript 对象序列化 ####

<div>
      <p ngNonBindable>{
       { { name: 'semlinker' } | json }}</p>
      <p>{
       { { name: 'semlinker' } | json }}</p> 
    </div>

#### 数值格式化 ####

number | ‘n1.n2-n3’  
\- n1: 最少位整数位，不够补0，默认1  
\- n2：最少保留几个小数，不够补0，默认0  
\- n3：最多保留几个小数，默认3

<div>
      <p ngNonBindable>{
       { 3343.14159265 | number: '1.4-4' }}</p>
      <p>{
       { 3.14159265 | number: '1.4-4' }}</p> 
    </div>

#### 日期格式化 ####

@Component({
      selector: 'date-pipe',
      template: `<div>
         <p>Today is { {today | date}}</p>  <p>Or if you prefer, { {today | date:'fullDate'}}</p>  <p>The time is { {today | date:'shortTime'}}</p>  <p>The custom date is { {today | date:'yyyy-mm-dd HH:mm a z':'+0900'}}</p>  <p>The custom date with fixed timezone is { {fixedTimezone | date:'yyyy年MM月dd目 HH:mm a z':'+0900'}}</p> </div>` }) export class DatePipeComponent { today = Date.now(); fixedTimezone = '2015-06-15T09:03:01+0900'; }

#### 字符截取 ####

<div>
      <p ngNonBindable>{
       { 'semlinker' | slice:0:3 }}</p>
      <p>{
       { 'semlinker' | slice:0:3 }}</p> 
    </div>

#### 管道链 ####

<div>
      <p ngNonBindable>{
       { 'semlinker' | slice:0:3 | uppercase }}</p>
      <p>{
       { 'semlinker' | slice:0:3 | uppercase }}</p> 
    </div>

#### 自定义管道 ####

定义好的管道要在根模块中 declarations 声明。

import { Pipe, PipeTransform } from '@angular/core';
    @Pipe({name: 'range'})
    export class RangePipe implements PipeTransform {
      transform(value: Array<any>, range: Number): Array<Number> {
        for(var i = 0; i < range; i++){
          value.push(i);
        }
        return value;
      }
    }