共享模块组件内的管道

Question

我一直在用 NG 为自己构建一个应用程序，运行在组件中使用管道从共享模块解决问题。

共享模块（删除所有其他内容）：

import { NgModule } from '@angular/core';
import { FilterByPipe, OrderByPipe } from './pipes/index';


@NgModule({
    imports: [],
    declarations: [FilterByPipe],

    exports: [
        //Pipes
        FilterByPipe,
    ],

    providers: [FilterByPipe]

})
export class SharedModule { }

我的问题是，如何在另一个组件代码中使用导出的管道 FilterByPipe？即

export class ViewSomethingComponent implements OnInit {
    constructor(private _filterBy: FilterByPipe)

    filterSomething(data){ this._filterBy.transform(data,{a:'value'})}
}

我试过直接导入管道，但这给了我依赖性问题，因为它不是从父模块提供的。除了将pip添加到父模块，然后将其作为依赖注入的提供者之外，还有没有其他方法可以使用共享组件导出的管道？

Answer 1

将 SharedModule 导入到您的根 AppModule。

然后您可以轻松地在 AppModule 内的任何组件中使用您的 FilterByPipe。

import { FilterByPipe } from '@angular/common';
class FilterByPipe {
  constructor(private fillterPipe: FilterByPipe) {}
  transformData(data) {
    this.fillterPipe.transform(data);
  }
}

并添加以下内容，否则会报错

providers: [FilterByPipe]

共享模块组件内的管道

Pipes within components from shared module

angular-module

angular-pipe

angular-components

angular