Angular中pipe的使用

piple名为管道，应用于格式化文本。管道将数据作为输入并将其转换为所需的输出。

Angular Pipes 将整数、字符串、数组和日期作为输入，用| 分隔，然后根据需要转换成格式，并在浏览器中显示出来。在插值表达式中，可以定义管道并根据情况使用它，在 Angular 应用程序中可以使用许多类型的管道。

1、内置管道：

• String -> String

  • UpperCasePipe

  • LowerCasePipe

  • TitleCasePipe

• Number -> String

  • DecimalPipe

  • PercentPipe

  • CurrencyPipe

• Object -> String

  • JsonPipe

  • DatePipe

• Tools

  • SlicePipe

  • AsyncPipe

  • I18nPluralPipe

  • I18nSelectPipe

2、自定义管道：

import { Pipe, PipeTansform } from 'angular/core';

@Pipe({
    name: 'formatTime'
})

export class FormatTimePipe implements PipeTransform {
    transform(str: string): string {
        if (str.includes('T')) {
            return 'str.replace(/T/, ' ')';
        }
        return str.substr(0, 19);
    }
}

import { Pipe, PipeTansform } from 'angular/core';
import * as uniq from 'loadash.uniq';

@Pipe({
    name: 'uniq'
})

export class UniqPipe implements PipeTransform {
    transform(array: Array): Array {
        return uniq(array);
    }
}

import { Pipe, PipeTansform } from '@angular/core';
import { DomSanitier } from '@angular/core';

@Pipe({
    name: 'safeHtml'
})

export class SafeHtmlPipe implements PipeTransform {
    constructor(private sanitizer: DomSanitizer);
    transform(html: string) {
        return this.sanitizer.bypassSecurityTrustHtml(html == null ? : html);
    }
}

完~