Question

我已经创建了这个管道

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

@Pipe({
  name: 'search'
})

export class SearchPipe implements PipeTransform {
  public transform(value, keys: string, term: string) {

    if (!term) return value;
    return (value || []).filter((item) => keys.split(',').some(key => item.hasOwnProperty(key) && new RegExp(term, 'gi').test(item[key])));

  }
}

并将其放入search.pipe.ts

如何在主要组件类中导入它以及如何注册？

我已经检查了这个tutorial，他们展示了在组件中使用它的示例，但是它们没有显示它们如何导入和注册它。

我已经在我的主要组件

中尝试了这个

import { SearchPipe } from './search.pipe.ts'

@NgModule({
  declarations: [ SearchPipe ]
})

然后在同一组件的html文件中我尝试了这个：

                    <ul *ngFor="let item of costCenters | search:'orgnumber,orgname':tempNode.cost_center">
                        <li>{{item.orgname}}</li>
                    </ul>

它产生了这个错误：

The pipe 'search' could not be found ("gIf="showCostCenterDropDown" class="cost-center-dropdown">
                        <ul *ngFor="let [ERROR ->]item of costCenters | search:'orgnumber,orgname':tempNode.cost_center">
                            "): ng:///AppModule/TripTagsComponent.html@46:40

Answer 1

您必须将管道包含在您要使用它的模块的declarations部分中：

@NgModule({
    ...
    declarations: [
        ...
        SearchPipe,
    ],
})

Answer 2

首先你不需要像这样写。 import { SearchPipe } from './search.pipe.ts'

你需要import { SearchPipe } from './search.pipe'因为角度知道这是一个TS文件

在管道中，您应该导入Injectable以注入此SearchPipe。

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

@Pipe({
  name: 'search'
})
@Injectable
export class SearchPipe implements PipeTransform {
  public transform(value, keys: string, term: string) {

    if (!term) return value;
    return (value || []).filter((item) => keys.split(',').some(key => item.hasOwnProperty(key) && new RegExp(term, 'gi').test(item[key])));

  }
}

在App Module上试试这个

exports: [
    SearchPipe

这是一个管道，我认为它更好。

http://www.angulartutorial.net/2017/03/simple-search-using-pipe-in-angular-2.html

如何在angular4中导入和注册管道

2 个答案: