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

在Angular中，一种分享通用指令，组件，管道等的好方法是使用所谓的共享模块。

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

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

让我们以currConvert管道为例。

声明名为ApplicationPipesModule
将管道添加到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 {}

Answer 2

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

Answer 3

考虑您具有以下结构：

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

 -SharedModule.ts

在DateComponentModule中使用DatesPipeModule时。

在DatesPipeModule中声明和导出DatesPipe
现在将DatesPipeModule直接导入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{}

您也可以从SharedModule导出并将其导入DatesComponentModule.ts，但是SharedModule不会在管道之前加载，因此会引发错误。

Answer 4

如果使用CLI为共享模块生成管道，则需要将管道手动添加到“导出”列表中。在浏览器中出现管道错误，直到将管道作为导出添加到导入/声明的共享模块中为止。

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

4 个答案: