angular 管道pipe

最新推荐文章于 2024-12-19 15:21:23 发布

MIKE-zi

最新推荐文章于 2024-12-19 15:21:23 发布

阅读量484

点赞数

CC 4.0 BY-SA版权

分类专栏： angular入门文章标签： angular.js 前端管道pipe 管道使用方法

本文链接：https://blog.csdn.net/lee727n/article/details/122661805

angular入门专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一个自定义Pipe组件，用于将日期转换为易于理解的时间表达式。例如，将指定日期转换为“24个月前”或“2年前”。此外，还提供了一个方法用于模拟获取24个月前的日期。

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

使用的地方模板.html

<p>
  {{ date | appAgo }}
</p>

使用的地方 .ts

  this.date = this.minusMonths(new Date(), 24);

  minusMonths(date: Date, months: number) {
    const result = new Date(date);
    result.setMonth(result.getMonth() - months);
    return result;
  }

模拟24个月前，两年前

关于管道的代码.pipe.ts

@Pipe({ name: 'appAgo' })
export class AgoPipe implements PipeTransform {
  transform(value: any): any {
    if (value) {
      const seconds = Math.floor((+new Date() - +new Date(value)) / 1000);
      if (seconds < 29) {
        // 小于 30 秒
        return '刚刚';
      }
      const intervals = {
        年: 3600 * 24 * 365,
        月: 3600 * 24 * 30,
        周: 3600 * 24 * 7,
        天: 3600 * 24,
        小时: 3600,
        分钟: 60,
        秒: 1
      };
      let counter = 0;
      for (const unitName in intervals) {
        if (intervals.hasOwnProperty(unitName)) {
          const unitValue = intervals[unitName];
          counter = Math.floor(seconds / unitValue);
          if (counter > 0) {
            return counter + ' ' + unitName + '前';
          }
        }
      }
    }
    return value;
  }
}

其实pipe就是一个翻译器，将一种形式的文字，转变成另外一种，效果如下