在 2 个组件中使用 angular 4 Pipe答案

【问题标题】：use angular 4 Pipe in 2 component在 2 个组件中使用 angular 4 Pipe
【发布时间】：2017-07-25 04:19:52
【问题描述】：

我有组件基础 angular4 应用程序，并且在每个组件中我使用 DataTable 插件和自定义 DataFilterPipe，当我在每个组件中像下面这样导入时，我得到的错误是错误错误：未捕获（承诺）：错误：类型 DataFilterPipe 是 2 个模块声明的一部分。请考虑将 DataFilterPipe 移至更高的模块。然后我创建了一个名为 dataFilterModule

的新模块

导入：

import {DataTableModule} from "angular2-datatable";
import {DataFilterPipe} from "../plugins/datatable/datafilterpipe";
import {HttpModule} from "@angular/http";
import {FormsModule} from "@angular/forms";

数据过滤模块：

import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {DataTableModule} from "angular2-datatable";
import {DataFilterPipe} from "../plugins/datatable/datafilterpipe";
import {HttpModule} from "@angular/http";
import {FormsModule} from "@angular/forms";

@NgModule({
    imports: [
        CommonModule,
        DataTableModule,
        FormsModule,
        HttpModule
    ],
    declarations: [
        DataFilterPipe
    ],
    exports: [
        DataFilterPipe
    ]
})
export class dataFilterModule {}

然后在我的 AppModule 中导入这个模块，但是！！我得到的错误是：

The pipe 'dataFilter' could not be found

我添加了如下导出的 dataFilterModule 但没有任何好消息！

export class dataFilterModule {
   static forRoot() {
     return {
         ngModule: DataFilterPipe,
         providers: [],
     };
   }
}

编辑： 我的自定义过滤器：

import * as _ from 'lodash';
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'dataFilter'
})
export class DataFilterPipe implements PipeTransform {

    transform(array: any[], query: string): any {
        if (query) {
        return _.filter(array, row=>row.name.indexOf(query) > -1);
     }
    return array;
  }
 }

【问题讨论】：

标签： angular angular-datatables angular2-custom-pipes

【解决方案1】：

答案是共享模块。看看this similar post我几天前回答的。

【讨论】：

创建 SharedModule 后，我应该将它导入 AppModule 或我需要的任何组件中吗？
是的，关键是确保您导出其他模块中可能需要的组件、指令...PIPES。一旦您将共享模块导入到您需要的模块中，您就可以将各个组件、指令等导入到模块的特定部分中。
谢谢，The pipe 'dataFilter' could not be found错误依然存在。
请看一下这个要点：gist.github.com/MortezaAghili/4e30566fe3753ca0e5fea5d5818727c1
这听起来很疯狂，但您是否尝试过终止服务器并重建应用程序？

【解决方案2】：

检查后@joshrathke joshrathke 回答我找到了解决方案。您应该创建 ShareModule 然后导入您的指令、组件或管道并使用它。您应该在所需的每个组件中导入 ShareModule！

【讨论】：

与“forRoot”共享root并导入共享模块，瞄准您的应用模块。