Question

我想使用Pipe按照提供的here对某些数据进行排序。

以上内容与angular documentation一致，即我们有以下导入和类定义：

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 decorator不包含pipes属性。相反，您应该将自定义管道添加到您的应用或功能NgModule declarations：

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

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

将其添加到NgModule＆＃39; declarations后，无需将其导入到您的组件模块中;只需在组件的模板中使用它。

如何在Ionic 2中使用Pipes（发布v2.2.1）

1 个答案: