角2管道沒有發現

Question

我跟着這個鏈接創建我自己的時間前管： Angular 2 "time ago" pipe

但是當我注射，並用它，我看到的錯誤：

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

下面是我的代碼，請幫我解決這個問題，非常感謝！

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

它似乎是PLATFORM_PIPES被棄用（https://github.com/angular/angular/blob/master/CHANGELOG.md） 。

您可以使用本文提供的方法來設置全局管：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

這是因爲從AsyncPipe您TimeAgoPipe繼承。我不知道他們的行爲在Angular2 beta版本，但角2.2.x中始終未能模板編譯我在找繼承@Component，@Pipe和@Directive類。

似乎有一些很好的理由Angular2不支持組件繼承：https://github.com/angular/angular/issues/7968

如果你正在尋找有角2.2兼容的TimeAgoPipe，看看我的answer here，或者在直接看gist。

Answer 3

即使我添加MomentModule作爲一個全球性的進口，我把

import { MomentModule } from 'angular2-moment'; 

，並把我MomentModule像這樣

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

下的相應* .module.ts，在你的情況下，將be post.component.module.ts

建議在下面的鏈接

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