web-dev-qa-db-ja.com

異なるモジュールで使用するパイプをグローバルに宣言する方法は？

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

angulartypescriptpipe
44
Sajeetharan - MSFT

Angularでは、一般的なディレクティブ、コンポーネント、パイプなどを共有するための優れた手法は、いわゆる共有モジュールを使用することです。

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

angularドキュメントの fundamentals section は、共有モジュールに関する非常に良い読み物です。

currConvertパイプを例に取りましょう。

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

  • declarations- decoratorメタデータの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 {}
101
cyr-x

共有モジュールを使用して、サービス、ディレクティブ、パイプ、コンポーネントを共有できます。

モジュールを作成し、パイプ、ディレクティブ、サービスまたはコンポーネントをインポートし、サービスの宣言、エクスポート、プロバイダーを設定する必要があります。

共有モジュールを必要な場所にインポートして使用します。

基本的に、NgModulesメタデータで宣言およびエクスポートされたパイプとディレクティブ。サービスの場合は、他のモジュールにアクセスするプロバイダーを返すforRootを定義します。

  • 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 {}

賢明なように他のモジュールでもできます。

5
hazan kazim

モジュール、つまりSharedModuleを作成し、そこにパイプを宣言する必要があります。次に、SharedModuleでパイプをエクスポートし、Module1とModule2の両方でSharedModuleをインポートする必要があります。 Angularのドキュメントには素晴らしい記事があります： https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module

4
Ledzz

共有モジュール用のCLIを使用してパイプを生成する場合、「エクスポート」リストに手動でパイプを追加する必要があります。パイプをインポート/宣言した共有モジュールにエクスポートとしてパイプを追加するまで、ブラウザーでパイプエラーが発生しました。

1
cbilliau