前段时间在 ionic V4 中使用 Angular 管道

Question

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

未捕获（承诺）：错误：模板解析错误： 这是我的管道代码

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";
}
  }
}

我的应用模块：

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,
    };
  }
}

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