Angular 自定义管道声明答案

【问题标题】：Angular custom Pipe declarationAngular 自定义管道声明
【发布时间】：2017-11-02 20:44:35
【问题描述】：

我正在尝试使用自定义管道来过滤项目列表。

// pipes/my-filter/my-filter.ts

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

@Pipe({
  name: 'my-filter',
})
export class MyFilter implements PipeTransform {
  transform(value: string, ...args) {
    return value;
  }
}

我想在显示该列表的页面组件中使用它。

// pages/mymodule-liste/mymodule-liste.html

<ion-content>
    <ion-searchbar
      placeholder="Find"
      [(ngModel)]="myInput">
    </ion-searchbar>
    <button ion-item *ngFor="let item of listItem | myFilter: myInput"">
</ion-content>

我尝试将 Pipe 导入到 Component

// pages/mymodule-liste/mymodule-liste.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { MyFilter } from '../../pipes/my-filter/my-filter';

@IonicPage()
@Component({
  selector: 'page-mymodule-liste',
  templateUrl: 'mymodule-liste.html',
})
export class MymoduleListePage {
  listItem: any
  constructor(
      public navCtrl: NavController,
      public navParams: NavParams,
      public myFilter: MyFilter) {
  }    
}

但我收到此错误：

错误：模板解析错误：找不到管道“myFilter”

我还尝试在mymodule-list.module.ts 中将其声明为提供者，或者在我的app.modules.ts 声明和提供者中将其声明为全局，但仍然不起作用。

我查看了关于 Pipe 的 Angular documentation 以及其他 stackoverflow 答案，但找不到使其工作的方法。

所以我的问题是如何在 Angular (v4.1.0) / Ionic (v3.3.0) 中声明/注册自定义 Pipe 以用于特定组件？

【问题讨论】：

标签： angular typescript ionic-framework angular-pipe

【解决方案1】：

管道的名称是 my-filter 而不是 myFilter。

还要检查管道是否在声明中的 ngModule 中注册

【讨论】：

【解决方案2】：

您的管道名称是 my-filter 而不是 myFilter

<ion-content>
    <ion-searchbar
      placeholder="Find"
      [(ngModel)]="myInput">
    </ion-searchbar>
    <button ion-item *ngFor="let item of listItem | my-filter: myInput"">
</ion-content>

【讨论】：

最好将管道重命名为myFilter，因为管道是在表达式内部使用的。
就这么简单。我觉得有点傻……谢谢你的回答。
@Aluan Haddad 我认为你是对的，我尝试将 my-filter 管道重命名为 myFilter 但出现错误：找不到管道“myFilter” .非常典型的 Angular。
事实上，我只是意识到这不再是执行此操作的“Angular 方式”。文档对此相当清楚，但是我想我可以像第一个版本中那样实现过滤器管道。事实上，我按照我在其他一些答案中找到的建议来移动 Component 中的逻辑。但还是对命名逻辑感到好奇。
使用名称 myFilter 而不是 my-filter 背后的逻辑是它用于模板中使用的 Angular 表达式 的上下文中。在{{}} 和属性的值之间使用的此类模板表达式是JavaScript 之类（例如n === 1 ? 'one': 'many'）并且应该遵循其命名约定。然而，Angular 本身通过引入区分大小写的属性 names 违反了 HTML 的命名规则。整个事情一团糟。