Angular2 如何使用管道将年份转换为年龄

Question

我想创建一个管道，可以将年份（1992）转换为年龄（26）（韩国年龄）

我认为我应该加载当前年份（2017 年），减去 1992 年并添加 +1

但我不知道如何用管道实现这一点。

感谢您提前提供的帮助。

Answer 1

块引用

这是我使用 moment.js 的示例（它还显示月份和年份，请随意删除它）：

import { Pipe, PipeTransform } from '@angular/core';
import * as moment from 'moment';
@Pipe({
    name: 'age'
})
export class AgePipe implements PipeTransform {

    transform(value: Date): string {
        let today = moment();
                let birthdate = moment(value);
                let years = today.diff(birthdate, 'years');
                let html:string = years + " yr ";

                html += today.subtract(years, 'years').diff(birthdate, 'months') + " mo";

        return html;
    }

}

然后只需在 HTML 中使用此管道：

{{person.birthday|age}}

，其中

person.birthday

是 Javascript Date 对象。

Answer 2

与 Luxon 一起：

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

/**
 * Tell the duration since a given time
 */
@Pipe({
  name: "timeSince",
})
export class TimeSincePipe implements PipeTransform {
  transform(
    value: string,
    precision: "years" | "months" | "days" = "years"
  ): string {
    let today = DateTime.now();
    let birthdate = DateTime.fromISO(value);

    let duration: any = today.diff(birthdate);
    let days, months, years: string;

    let html: string = "";
    switch (precision) {
      case "days":
        // Note: Going one unit lower give us integer/rounded values
        duration = duration.shiftTo("years", "months", "days", "hours");
        days = duration.days.toString();
        months = duration.months.toString();
        years = duration.years.toString();

        html += [years, "years", months, "months", days, "days"].join(" ");
        break;
      case "months":
        duration = duration.shiftTo("years", "months", "days");

        months = duration.months.toString();
        years = duration.years.toString();

        html += [years, "years", months, "months"].join(" ");
        break;
      default:
        // years
        duration = duration.shiftTo("years", "months");

        years = duration.years.toString();

        // Do not display unit when only years
        html += years;
        break;
    }

    return html;
  }
}

你这样使用它

{{ '2020-11-28T07:47:39.742Z' | timeSince:'days' }} --> 0 years 9 months 1 days

{{ '2020-11-28T07:47:39.742Z' | timeSince:'months' }} --> 0 years 9 months

{{ '2020-11-28T07:47:39.742Z' | timeSince }} --> 0 years

Answer 3

这是一个不使用任何第三方

(moment.js/Luxon)

日期库的解决方案。

代码：

import { Pipe, PipeTransform } from '@angular/core';
   
@Pipe({
 name: 'age',
})

export class AgePipe implements PipeTransform {

/**
 * Format given date/dob to the age.
 * @param date - Given date to be converted to the dob and age
 * @returns - age string
 */
transform(dob: string | Date): number {

const today: Date = new Date();
const birthDate: Date = new Date(dob);

let age: number = today.getFullYear() - birthDate.getFullYear();
const monthDiff: number = today.getMonth() - birthDate.getMonth();

 if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
  age--;
 }

 return age;
 }
}

在您的 HTML 模板中使用它，如下所示：

<span>{{ '1992-05-12' | age }} years</span>

Answer 4

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

@Pipe({
  name: 'age',
  standalone: true
})
export class AgePipe implements PipeTransform {

  transform(value: string): number {
    return moment().diff(moment(value), "years")
  }

}