我按照这个链接创建了自己的“time ago”管道:
Angular 2 "time ago" pipe
但是当我注入并使用它时,我看到了错误:
timeAgo.pipe.ts
以下是我的代码,请帮助我解决这个问题,非常感谢!模板解析错误:找不到管道'timeAgo'
timeAgo.pipe.ts
import { Pipe, ChangeDetectorRef } from '@angular/core';
import { AsyncPipe } from '@angular/common';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/startWith';
@Pipe({
name: 'timeAgo',
pure: false
})
export class TimeAgoPipe extends AsyncPipe {
value: Date;
timer: Observable<string>;
constructor(private ref: ChangeDetectorRef){
super(ref);
}
transform(obj: any, args?: any[]): any {
if(obj instanceof Date) {
this.value = obj;
if(!this.timer) {
this.timer = this.getObservable();
}
return this.timer;
}
return this.transform(obj, args);
}
private getObservable(){
const INTERVAL = 1000 * 45;
const ONE_MINUTE = 60;
const ONE_HOUR = 60 * 60;
const ONE_DAY = 60 * 60 * 24;
const ONE_MONTH = 60 * 60 * 24 * 30;
const ONE_YEAR = 60 * 60 * 24 * 30 * 12;
return Observable.interval(INTERVAL).startWith(0).map(() => {
// current time
let now = Date.now();
// time since message was sent in seconds
let delta = (now - this.value.getTime()) / 1000;
// format string
if(delta < ONE_MINUTE) {
return 'just now';
}
if(delta < ONE_HOUR) {
return Math.floor(delta / ONE_MINUTE) + 'min(s) ago';
}
if(delta < ONE_DAY) {
return Math.floor(delta / ONE_HOUR) + 'hour(s) ago';
}
if(delta < ONE_MONTH) {
return Math.floor(delta / ONE_DAY) + 'day(s) ago';
}
if(delta < ONE_YEAR) {
return Math.floor(delta / ONE_MONTH) + 'month ago';
}
});
}
}
main.ts
import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode, provide, PLATFORM_PIPES } from '@angular/core';
bootstrap(AppComponent, [
APP_ROUTER_PROVIDERS,
provide(PLATFORM_PIPES, {
useValue: [TimeAgoPipe],
multi: true
})
]);
post.component.html
<ul *ngIf="posts">
<li *ngFor="let post of posts">
{{ post.created_at | timeAgo}}
</li>
</ul>