Angular中pipe的使用

最新推荐文章于 2024-04-30 12:14:06 发布

qq_27953397

最新推荐文章于 2024-04-30 12:14:06 发布

阅读量1.5k

点赞数 1

文章标签： angular.js javascript 前端

本文链接：https://blog.csdn.net/qq_27953397/article/details/126580336

版权

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<any>): Array<any> {
        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);
    }
}

完~