如何全局声明管道在不同模块中使用？

Question

我有一个名为CurrConvertPipe的定制管道

import {Pipe, PipeTransform} from '@angular/core';
import {LocalStorageService} from './local-storage';
@Pipe({name: 'currConvert', pure: false})
export class CurrConvertPipe implements PipeTransform {
  constructor(private currencyStorage: LocalStorageService) {}

  transform(value: number): number {
     let inputRate = this.currencyStorage.getCurrencyRate('EUR');
    let outputputRate = this.currencyStorage.getCurrencyRate(localStorage.getItem('currency'));
    return value / inputRate * outputputRate;
  }
}

我需要在两个不同的模块中使用它，Module1和Module2。

当我导入Module1和Module2时，会发现一个错误，它应该在更高级别的模块中声明。

所以我在app.module.ts中声明了管道

import './rxjs-extensions';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CurrConvertPipe } from './services/currency/currency-pipe';
@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        AppRoutingModule,
        Module1,         
        Module2

    ],

    declarations: [
        AppComponent,
        CurrConvertPipe
    ],
    providers: [

    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

但是当我在Module1中使用它时，它会抛出一个错误

找不到管道'currConvert‘

Answer 1

在角度上，共享公共指令、组件、管道等的一种很好的技术是使用所谓的共享模块。

这些模块声明并导出公共部件，以使它们可用于任何其他模块。

角文档的fundamentals section是关于共享模块的非常好的读物。

让我们以您的currConvert管道为例。

• 声明新的NgModule名为ApplicationPipesModule
• 将管道添加到declarations和exports数组的NgModule-decorator元数据中
• 将管道工作所需的任何模块添加到imports数组中 // application-pipes.module.ts /其他导入从“./{your}”导入{ CurrConvertPipe }；@NgModule({ imports: // dep模块、声明: CurrConvertPipe，exports: CurrConvertPipe })导出类ApplicationPipesModule {}
• 通过将创建的ApplicationPipesModule模块添加到imports数组中，将其导入到将要使用管道的模块中 // my-module1.ts //其他导入从‘./{your path}’导入{ ApplicationPipesModule }；@NgModule({ imports: //其他dep模块ApplicationPipesModule，声明：[]，exports：[] })导出类MyModule1 {}

Answer 2

您可以使用共享模块来共享服务、指令、管道、组件

您必须创建一个模块并导入管道、指令、服务或组件，并为服务设置声明、导出和提供者。

将共享模块导入到任何您想要的地方，并使用它。

主要是在NgModules元数据中声明和导出管道和指令。对于服务，定义forRoot，它返回提供者来访问其他模块。

• shareModule.ts 从“@ngModule/core”导入{ ModuleWithProviders }；从“./{your}”导入{ appDirective }；从“./{your}”导入{ appPipe }；从./{your}导入{ appService }；从“appService”模块({声明: appPipe，appDirective，导出: appPipe，appDirective })导出类SharingModule { static ()：ModuleWithProviders {返回{ ngModule: SharingModule，providers: appService}；}}
• my-module1.module.ts 从“@ BrowserModule /platform-browser”导入{ NgModule }；从“@角/核心”导入{ myComponent }；从“./{your}”导入{ SharingModule }；从‘./{your}’导入{SharingModule}；从myComponent ({声明:导入: BrowserModule、SharingModule.forRoot()、})导出类AppModule {}

就像智慧一样，你也可以用模数来做。

Answer 3

您应该创建一个模块，即SharedModule，并在那里声明管道。然后您应该在SharedModule中导出管道，并在Module1和Module2中导入您的SharedModule。在角的文档中有一篇很棒的文章：https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module