ionic3 自定义时间Pipe（多语言版）

使用date-fns库，是一个轻量级的日期库，提供了各种格式化日期函数。官网

1. 安装date-fns库

$ npm install date-fns --save

2. 新建一个Pipe

$ ionic g pipe relative-time

成功后结构如下

图片.png

3. 将pipes的Module导入到app.module(懒加载导入到页面的Module)

import { pipesModule } form '../pipes/pipes.module';

...........
@NgModule({
  import: [
    PipesModule,
    IonicModule.forRoot(MyApp)
  ]
})

4. 修改relative-time文件

import { Pipe, PipeTransform } from '@angular/core';
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
import enUS from 'date-fns/locale/en';
import zhCN from 'date-fns/locale/zh_cn';
import zhTW from 'date-fns/locale/zh_tw';
import { Events } from 'ionic-angular';
import { StorageServiceProvider } from '../../providers/storage-service/storage-service';

@Pipe({
  name: 'relativeTime',
})
export class RelativeTime implements PipeTransform {

  language: any; // 使用语言
  constructor(private storageService: StorageServiceProvider,
    private events: Events) {
    
   this.setLanguage();

    //语言切换后更改（当语言切换成功后需发布一个通知，在这里进行监听）
    this.events.subscribe('set:language',() => {
      this.setLanguage();
    });
  }

  /**
   * 判断当前使用语言
   */
  setLanguage() {
    //获取当前语言（根据自己多语言切换时存储的值进行判断）
    let l = this.storageService.read('language');
    if (l == 'zh-HK') {
      this.language = zhTW;
    } else if (l == 'zh-CN') {
      this.language = zhCN;
    } else {
      this.language = enUS;
    }
  }

  /**
   * Takes a value and makes it lowercase.
   */
  transform(value: string, ...args) {
    return distanceInWordsToNow(new Date(value), {
      addSuffix: true,
      locale: this.language
    });
  }
}

例如：当语言切换时保存一个判断值与发布一个events

图片.png

5. 使用，time需是一个时间串（如毫秒数或时间格式）

 {{ time| relativeTime}} 

6. 效果

图片.png

如果切换语言后，时间语言并未发生变化，检查语言是否设置正确与语言变化后数据是否已重新渲染