Angular 2 Rohr nicht gefunden

Question

ich diesen Link folgte meine eigene Zeit vor Rohr zu schaffen: Angular 2 "time ago" pipe

aber wenn ich zu injizieren und es sah ich den Fehler:

Template parse errors: The pipe 'timeAgo' could not be found

Unten ist mein Code Bitte helfen Sie mir, dieses Problem zu lösen, vielen Dank !!

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> 

Answer 1

Es scheint zu sein, dass PLATFORM_PIPES ist veraltet (https://github.com/angular/angular/blob/master/CHANGELOG.md) .

Sie können die Methode in diesem Artikel verwenden globales Rohr zu setzen: https://medium.com/@jecelynyeen/angular2-platform-pipes-globally-available-custom-pipe-will-be-deprecated-soon-c6ad16812c11#.ntmim1t9x

bootstrap(AppComponent, [ 
    provide(CompilerConfig, { 
    useValue: new CompilerConfig({ 
     platformPipes: [...COMMON_PIPES, TimeAgoPipe], 
     platformDirectives: [...COMMON_DIRECTIVES], 
     genDebugInfo: true 
    }) 
    }), 
]); 

Answer 2

Dies geschieht, weil Ihre TimeAgoPipe erbt von AsyncPipe. Ich weiß nichts über das Verhalten während der Angular2-Beta-Builds, aber Angular 2.2.x findet die vererbten Klassen @Component, @Pipe und @Directive bei der Template-Erstellung für mich nicht.

Es scheint, gibt es einige sehr gute Gründe Angular2 nicht Bestandteil Vererbung unterstützt: https://github.com/angular/angular/issues/7968

Wenn Sie sich für eine TimeAgoPipe kompatibel mit kantigem 2.2, haben einen Blick auf meine answer here oder haben einen direkten Blick betrachten die gist.

Answer 3

Auch wenn ich MomentModule als globaler Import hinzugefügt, habe ich

import { MomentModule } from 'angular2-moment'; 

und habe ich wie so MomentModule

... 
imports: [ 
    ..., 
    MomentModule, 
    ..., 
] 

unter der entsprechenden * .module.ts, es in Ihrem Fall würde sein post.component.module.ts

wie unten

in Verbindung geraten

https://stackoverflow.com/questions/47182015/template-parse-the-pipe-could-not-be-found#=