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

我有一个定制的管道命名为 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”

101314 次浏览
小开

You should make a module, i.e. SharedModule and declare your pipe there. Then you should export pipe in SharedModule and import your SharedModule in both Module1 and Module2. There's a great article in Angular's docs: https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module

小开
最佳答案

In Angular a good technique for sharing common directives, components, pipes, etc. is to use a so called shared module.

Those modules declare and export common parts, to make them usable for any of your other modules.

The fundamentals section of the angular documentation is a very good read about shared modules.

Let's take as example your currConvert pipe.

  • Declare new NgModule called ApplicationPipesModule

  • Add the pipe to the declarations and exports arrays of the NgModule-decorator metadata

  • Add any modules that may be required for your pipe to work to the imports array

    // application-pipes.module.ts
// other imports
import { CurrConvertPipe } from './{your-path}';


@NgModule({
imports: [
// dep modules
],
declarations: [
CurrConvertPipe
],
exports: [
CurrConvertPipe
]
})
export class ApplicationPipesModule {}

  • import the created ApplicationPipesModule module into the modules where your pipe is going to be used, by adding it to the imports array

    // my-module1.module.ts
// other imports
import { ApplicationPipesModule } from './{your-path}';


@NgModule({
imports: [
// other dep modules
ApplicationPipesModule
],
declarations: [],
exports: []
})
export class MyModule1 {}
小开

you can use Sharing Modules for share your service, directive, pipes, components

you have to create an module and import the pipes ,directive, services or components and set the declaration, export and providers for the services.

import the sharing module in to where ever you want and use it.

basically pipes and directives declared and exported in NgModules meta data. for services define forRoot which returns the providers to access other modules.

  • shareModule.ts

    
import { NgModule, ModuleWithProviders } from '@angular/core';
import { appDirective } from './{your-path}';
import { appPipe } from './{your-path}';
import { appService } from './{your-path}';


@NgModule({
declarations: [
appPipe,
appDirective
],
exports: [
appPipe,
appDirective
]
})
export class SharingModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: SharingModule,
providers: [ appService ]
};
}
}

  • my-module1.module.ts

    
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { myComponent } from './{your-path}';


import { SharingModule } from './{your-path}';


@NgModule({
declarations: [
myComponent
],
imports: [
BrowserModule,
SharingModule.forRoot()
],
})
export class AppModule {}

Like wise you can do in othe moduls also.

小开

If you generate a pipe using CLI for a shared module you will need to add the pipe to the 'exports' list manually. My pipe error'd in the browser until I added the pipe as an export in my shared module I imported/declared it in.

小开

Consider you have this structure:

app
-shared
-components
-DateComponentModule.ts
-pipes
-DatesPipe
-DatesPipeModule.ts


-SharedModule.ts

When you are using DatesPipeModule in DateComponentModule.

  1. Declare and Export DatesPipe in DatesPipeModule

  2. Now Import DatesPipeModule directly into DateComponentModule.

DatesPipeModule.ts

import { DatesPipe} from './{your-path}';


@NgModule({
imports: [],
declarations: [
DatesPipe
],
exports: [
DatesPipe
]
})
export class DatesPipeModule{}

DateComponentModule.ts

import { DatesPipeModule} from './{your-path}';


@NgModule({
imports: [DatesPipeModule],
declarations: [],
exports: []
})
export class DatesPipeModule{}

You can also export it from SharedModule and import it in DatesComponentModule.ts, but SharedModule will not load before pipes, so it throws an error.


提交答案