preface

When I was writing something and I needed something like this,

And I can’t find anyone to write about it, so write your own

rendering

  • before

  • After using the pipe

Lead based

  • ng2+Basic knowledge of
  • typescriptbasis

The implementation code

  • LongTimeago.pipe.ts

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

function timeago(differtime: number, args: number = 5) :string {
  const currentYear: number = new Date().getFullYear(); // Get the current year

  // Unreliable timestamp mapping
  const TimetoSecond: any = {
    year: new Date(`${currentYear}`).getTime() / 1000,
    month: 30 * 86400,
    day: 86400,
    hour: 3600,
    minute: 60};if (differtime >= TimetoSecond.year) {
    return parseInt(`${differtime / TimetoSecond.year}`.10) + "Years ago";
  }
  if (differtime >= TimetoSecond.month) {
    return parseInt(`${differtime / TimetoSecond.month}`.10) + "Months ago";
  }
  if (differtime >= TimetoSecond.day) {
    return parseInt(`${differtime / TimetoSecond.day}`.10) + "Days ago";
  }
  if (differtime >= TimetoSecond.hour) {
    return parseInt(`${differtime / TimetoSecond.hour}`.10) + "Hours ago";
  }
  if (differtime >= TimetoSecond.minute) {
    return parseInt(`${differtime / TimetoSecond.minute}`.10) + "Minutes ago.";
  }
  if (differtime < args) {
    return "A moment ago.";
  } else {
    return parseInt(`${differtime}`.10) + "Before the second"; }}@Pipe({
  name: "longtimeago",})export class LongTimeagoPipe implements PipeTransform {
  /** ** @param value The value that can be processed is either a string (which can be converted to a number) or a number * @param args passed in the default number before processing, which is a moment */
  transform(value: string | number, args? :any) :any {
    // Get today's timestamp and get the number of seconds
    const currentTimeStamp: number = new Date().getTime();
    if (value) {
      let paramTimestamp: number = 0; // The timestamp passed in
      if (typeof value === "string") {
        paramTimestamp = new Date(`${value}`).getTime();
        if (Number.isNaN(paramTimestamp)) return null;
      }
      if (typeof value === "number") {
        paramTimestamp = new Date(value).getTime();
      }
      const DifferTime = (new Date().getTime() - paramTimestamp) / 1000;
      return timeago(DifferTime, args);
    } else {
      // Otherwise return the original value
      return null; }}}Copy the code

usage

Just import it in modules, such as app.modules.ts

  • app.module.ts
import { LongTimeagoPipe } from '.. /pipe/LongTimeago.pipe';

// The rest is omitted here. For better display, declarations include components that can be used under modules
@NgModule({
  declarations: [
    LongTimeagoPipe
  ],
  imports: [
  ],
  providers: [],
  bootstrap: [AppComponent],
})

Copy the code
  • app.component.html , |And then there are the pipes

  <div class="last-reply-area">
        <span>Last reply to:</span>
        <span>{{listitem.last_reply_at |longtimeago}}</span>
      </div>
Copy the code

conclusion

If there is anything wrong, please leave a message and correct it in time. Thank you for reading