前段时间使用 Angular 在 ionic V4 中进行管道传输

Question

我想在我的 ionic 项目中使用 time ago 管道，但是每当我在我的 HTML 中使用该管道时，我都会收到此错误：

Uncaught (in promise): Error: Template parse errors: here is my pipe code

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

@Pipe({ name: 'timeAgo' })
export class TimeAgoPipe implements PipeTransform {
  transform(d: any): string {
let currentDate = new Date(new Date().toUTCString());
let date = new Date(d + "Z");

let year = currentDate.getFullYear() - date.getFullYear();
let month = currentDate.getMonth() - date.getMonth();
let day = currentDate.getDate() - date.getDate();
let hour = currentDate.getHours() - date.getHours();
let minute = currentDate.getMinutes() - date.getMinutes();
let second = currentDate.getSeconds() - date.getSeconds();

let createdSecond = (year * 31556926) + (month * 2629746) + (day * 86400) + (hour * 3600) + (minute * 60) + second;

if (createdSecond >= 31556926) {
  let yearAgo = Math.floor(createdSecond / 31556926);
  return yearAgo > 1 ? yearAgo + " years ago" : yearAgo + " year ago";
} else if (createdSecond >= 2629746) {
  let monthAgo = Math.floor(createdSecond / 2629746);
  return monthAgo > 1 ? monthAgo + " months ago" : monthAgo + " month ago";
} else if (createdSecond >= 86400) {
  let dayAgo = Math.floor(createdSecond / 86400);
  return dayAgo > 1 ? dayAgo + " days ago" : dayAgo + " day ago";
} else if (createdSecond >= 3600) {
  let hourAgo = Math.floor(createdSecond / 3600);
  return hourAgo > 1 ? hourAgo + " hours ago" : hourAgo + " hour ago";
} else if (createdSecond >= 60) {
  let minuteAgo = Math.floor(createdSecond / 60);
  return minuteAgo > 1 ? minuteAgo + " minutes ago" : minuteAgo + " minute ago";
} else if (createdSecond < 60) {
  return createdSecond > 1 ? createdSecond + " seconds ago" : createdSecond + " second ago";
} else if (createdSecond < 0) {
  return "0 second ago";
}
  }
}

我的 AppModule：

import { TimeAgoPipe } from  './pipes/time-ago.pipe';
@NgModule({
  declarations: [TimeAgoPipe],
  ...],
  bootstrap: [AppComponent]
})

我的HTML:

<h2>{{today | timeAgo}}</h2>

Answer 1

TLTR: 将管道添加到正在使用它的组件的模块上的声明数组中。

您可以通过两种方式使用管道：作为使用 DI 的服务或在模板中使用。

在第一种情况下，要在所有应用程序中将管道用作服务，将其添加到 app.module 提供程序就可以了。

在模板中使用管道时不一样：在这种情况下，您需要在模块中声明使用管道。

我通常的做法是创建一个如下所示的管道模块

const PIPES = [TruncatePipe, CapitalizeFirstPipe, ReplacePipe, FormatAgeRangePipe];

@NgModule({
  declarations: PIPES,
  exports: PIPES,
})
export class PipesModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: PipesModule,
      providers: PIPES,
    };
  }
}

与我所有共享的自定义管道。我可以将它添加到 app.module 和 forRoot() 以将它们作为服务注入，另外，当我需要模块中特定组件的模板中的管道时，我可以只导入 pipe.module 。

前段时间使用 Angular 在 ionic V4 中进行管道传输

Time ago pipe in ionic V4 with Angular

pipe

timeago

ionic-framework

angular