angular管道多种用法

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

前端自由人

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

阅读量596

点赞数

分类专栏： angular

本文链接：https://blog.youkuaiyun.com/qq_28395503/article/details/114734687

版权

本文介绍了Angular管道的使用，包括参数化的管道、如何进行链式管道操作以及如何创建和应用自定义管道。同时，讨论了纯管道和非纯管道的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

angular管道多种用法

管道参数化

// ts文件
public birstday = new Date()

private flag:boolean = false;
  get format(){
    return this.flag ? "yyyy-MM-dd" : "yyyy/MM/dd"
  }

// html文件
{
  {birstday | date }}
{
  {birstday | date:'yyyy-MM-dd'}}
<!-- 管道参数化 -->
{
  {birstday | date:format}}

链式管道

<!-- 链式管道 多层管道 变成大写的了 -->
    {
  {birstday | date | uppercase}}

自定义管道

创建自定义管道文件：
hello-self-pipe.ts

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({name:"myFormat"})
export class MyFormatPipe implements PipeTransform {
    transform(value:any, ...args:any[] ){
        if(args.length < 2){
            args = ['<--','---<<<'];
        }
        return args[0] + ' ' &