角度2パイプ

Question

を発見していない私は自分の時間前にパイプを作成するには、このリンクをたどっ

以下

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

は私のコードです、この問題を解決するために私を助けてください、多くのありがとう!! （https://github.com/angular/angular/blob/master/CHANGELOG.md）PLATFORM_PIPESは廃止されていることであると思わ

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

。

あなたはグローバルなパイプを設定するには、この記事で提供される方法を使用することができます。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ベータビルド中の動作についてはわかりませんが、Angular 2.2.xはテンプレートのコンパイル中に継承された@Component,@Pipe、および@Directiveクラスを一貫して見つけることができません。 https://github.com/angular/angular/issues/7968

あなたは角2.2との互換性TimeAgoPipeを探しているなら、私のanswer hereを見ているかで直接見て、：

Angular2は、コンポーネントの継承をサポートしていないいくつかの非常に良い理由があるようですgist。

Answer 3

私はグローバルなインポートとしてMomentModuleを追加したにもかかわらず、私は

import { MomentModule } from 'angular2-moment'; 

を入れて、私はあなたのケースでは、それは希望、対応する* .module.ts下のよう

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

ようMomentModule入れますpost.component.module.ts

以下のリンクに記載されています。

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