如何在Ionic 2中使用Pipes(发布v2.2.1)

Question

我想使用Pipe来对这里提供的一些数据进行排序.

以上看起来与角度文档一致,即我们有以下导入和类定义:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'exponentialStrength'})
export class ExponentialStrengthPipe implements PipeTransform {
  transform(value: number, exponent: string): number {
    let exp = parseFloat(exponent);
    return Math.pow(value, isNaN(exp) ? 1 : exp);
  }
}

所以,在上面我们从进口Pipe和PipeTransform,然后我们从我们的派生类PipeTransform.

使用离子发生器,例如ionic g pipe testPipe我注意到不同的进口,并且它没有实现PipeTransform:

@Pipe({
  name: 'test-pipe'
})
@Injectable()
export class TestPipe {
  transform(value, args) {
    value = value + ''; // make sure it's a string
    return value.toLowerCase();
  }
}

所以它没有扩展PipeTransform？无论如何,继续,我试图使用它,所以我尝试将它添加到我的组件.

import { TestPipe } from '../../pipes/test-pipe';

@Component({
  pipes:[TestPipe],
  selector: 'my-page',

我得到这个TypeScript错误:

[ts] Argument of type '{ pipes: typeof TestPipe[]; selector: string;
templateUrl: string; animations: AnimationEntryM...' is not assignable
to parameter of type 'Component'.
Object literal may only specify known properties, and 'pipes' does not
exist in type 'Component'.`

这里有任何想法？管道的doco似乎不匹配.

Answer 1

在Angular 2的发行版中,@Component装饰器不包含pipes属性.相反,你应该自定义管道添加到您的应用程序或功能NgModule的declarations:

import { TestPipe } from '... pipes/test-pipe';

@NgModule({
  declarations: [
    TestPipe,
    ...
  ],
  ...
})
class AppModule {}

随着它添加到它NgModule的declarations,没有必要将其导入您的组件的模块; 只需在组件的模板中使用它.