Question

最多angular2.beta15（包括）以下代码工作正常：

@Pipe({
  name: 'isoDate'
})
export class ISODatePipe extends DatePipe implements PipeTransform {
  transform(isoDate: string, args: any[]): string {
    return super.transform(new Date(isoDate), args);
  }
}

在RC1上，即使我调整了管道语法，它也不再起作用了：

@Pipe({
  name: 'isoDate'
})
export class ISODatePipe extends DatePipe implements PipeTransform {
  transform(isoDate: string, pattern?: string): string {
    const date = new Date(isoDate);
    return super.transform(date, pattern);
  }
}

我在浏览器中看到的消息如下：The pipe 'isoDate' could not be found。

如果我删除extends部分并返回一些字符串 - 它会再次起作用。

发生了什么变化？

P.S。

目前已将其更改为

@Pipe({ name: 'isoDate' })
export class ISODatePipe implements PipeTransform {
  private datePipe: DatePipe = new DatePipe();

  transform(isoDate: string, pattern?: string): string {
    const date = new Date(isoDate);
    return this.datePipe.transform(date, pattern);
  }
}

它有效，但看起来有点奇怪。

Answer 1

发生了什么变化？

Appapptely DatePipe类现在有构造函数

constructor(@Inject(LOCALE_ID) private _locale: string) {} 所以你可以传递 LOCALE_ID 作为参数：

const datePipe = new DatePipe();

编译时指定local ngc --locale=en-US LOCAL_ID传递给DatePipe构造函数。

Answer 2

扩展的DatePipe

import { DatePipe } from '@angular/common';
import { Inject, LOCALE_ID, Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'myDate',
})
export class MyDatePipe extends DatePipe implements PipeTransform {
  constructor(@Inject(LOCALE_ID) locale: string) {
    super(locale);
  }

  transform(value: any, format?: string, timezone?: string, locale?: string): string {
    const formattedDate = super.transform(value, format, timezone, locale);
    // do other formatting and return the value
  }
}

html

<div>{{ someDate | myDate: 'MMM d' }}</div>

如何扩展angular2 DatePipe

2 个答案: