Angular 2管道未找到。

Question

我按照这个链接创建了自己的“time ago”管道： Angular 2 "time ago" pipe 但是当我注入并使用它时，我看到了错误：

模板解析错误：找不到管道'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>

- user3027246

---

你在 post.component.ts 中是否已经导入了 pipe，类似于这样的语句 - import { TimeAgoPipe } from './timeAgo.pipe'; - Sanket

我全局使用管道，因此我在 main.ts 中导入它。 - user3027246

听起来像是 https://github.com/angular/angular/issues/8694。我猜管道扩展其他类仍然存在问题。 - Günter Zöchbauer

请确保在 main.ts 中的声明中添加管道。 - parsethis

Answer 1

这是因为您的TimeAgoPipe继承自AsyncPipe。我不知道在Angular2 beta版本中的行为如何，但是在Angular 2.2.x中，我一直无法在模板编译期间找到继承的@Component、@Pipe和@Directive类。

似乎有一些非常好的原因，导致Angular2不支持组件继承: https://github.com/angular/angular/issues/7968 如果您正在寻找一个与Angular 2.2兼容的TimeAgoPipe，请查看我的答案或直接查看gist。

- Johannes Rudolph

Answer 2

似乎 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
    })
  }),
]);

- Harry Ninh

Answer 3

尽管我将MomentModule作为全局导入添加了，但我放置了

。

import { MomentModule } from 'angular2-moment';

并将MomentModule放置在这里

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

在对应的 *.module.ts 文件中，您的情况是 post.component.module.ts，如下面的链接所建议的那样。

https://dev59.com/p6bja4cB1Zd3GeqPi5ka=

- kabz