[解決済み] 異なるモジュールで使用するためにパイプをグローバルに宣言するには？

質問

カスタムパイプ 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;
  }
}

これを2つのモジュールで使う必要があります。 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' が見つかりませんでした。

どのように解決するのですか？

Angularでは、共通のディレクティブ、コンポーネント、パイプなどを共有するための良いテクニックとして、いわゆる 共有モジュール .

これらのモジュールは、他のどのモジュールでも使用できるように、共通の部品を宣言し、エクスポートします。

このような ファンダメンタルズセクション は、共有モジュールに関する非常に良い読み物です。

例として、あなたの currConvert というパイプがあるとします。

• という新しいNgModuleを宣言します。 ApplicationPipesModule

• パイプを declarations と exports の配列は NgModule -デコレータのメタデータ

• パイプを動作させるために必要なモジュールを imports の配列に追加します。

  // application-pipes.module.ts
  // other imports
  import { CurrConvertPipe } from './{your-path}';
  
  @NgModule({
    imports: [
      // dep modules
    ],
    declarations: [ 
      CurrConvertPipe
    ],
    exports: [
      CurrConvertPipe
    ]
  })
  export class ApplicationPipesModule {}
  
  

• 作成した ApplicationPipesModule モジュールを、あなたのパイプが使用されるモジュールにインポートします。 imports の配列に追加します。

  // my-module1.module.ts
  // other imports
  import { ApplicationPipesModule } from './{your-path}';   
  
  @NgModule({
   imports: [
     // other dep modules
     ApplicationPipesModule
   ],
   declarations: [],
   exports: []
  })
  export class MyModule1 {}