Angular 2 自定义管道说明答案

【问题标题】：Angular 2 Custom Pipe ExplanationAngular 2 自定义管道说明
【发布时间】：2016-11-01 15:41:13
【问题描述】：

我一直在慢慢学习 Angular 2，最近我一直在尝试实现一个自定义管道来按类别过滤我的图库结果。我阅读的所有文章都没有真正详细介绍自定义管道中实际发生的事情，我很困惑如何构建自己的。

这是我正在查看的教程中的一些代码，我认为代码有点过时，但我想主体是相同的。

import {Pipe} from 'angular2/core';

@Pipe({
  name: 'AgePipe'
})
export class AgePipe {

  transform(value, args?) {
    let [minAge] = args;
    return value.filter(person => {
      return person.age >= +minAge;
    });
  }

}

我想在实现管道时设置值和参数。我不断收到 value 和 args 的 TS 错误，说“参数 'value' 隐含地具有 'any' 类型”。

【问题讨论】：

管道被隐式地提供给左侧参数X | AgePipe 作为模板编译器的值。模板编译器还将把右边冒号后面的任何内容作为转换 X | AgePipe: '21' 的 args 值

标签： angular

【解决方案1】：

此打字稿错误是由于您将打字稿编译器配置为禁止隐式任何事实引起的。 IE。您应该明确指定变量的类型，并明确指定 any 类型（如果这是您想要的类型），而不是依赖打字稿来隐式推断 any 类型。请参阅TypeScript documentation 中的--noImplicitAny。

请注意，Angular2 选择不包含过滤器管道，因为他们认为这是一个坏主意：这样的操作成本太高，视图无法重复执行，并且应该仅在组件需要时执行。

【讨论】：

感谢您的信息。我读过过滤器管道由于速度原因是个坏主意。我的应用程序相当简单而且很小，所以我认为这不是问题，但我想知道是否有更好的方法来实现我想做的事情。我在顶部有一个导航栏，有 4 个类别（设计、网页设计、摄影、美术）。我在主页上的缩略图数组中列出了我的所有项目，并且我希望允许用户单击导航中的链接以根据需要将数组过滤到每个类别。有没有更好的方法在过滤器之外实现这一点？
是的。单击链接时只需调用组件的方法，过滤组件中的原始数组并将其保存到组件的字段中。在您的视图中遍历这个过滤后的数组。