95

我有一个名为的自定义管道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.
当我导入Module1andModule2时，我得到一个错误，说它应该在更高级别的模块中声明。

所以我声明里面的管道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”

4

5 回答 5

180

在 Angular 中，共享通用指令、组件、管道等的一个很好的技术是使用所谓的共享模块。

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

角度文档的基础部分是关于共享模块的很好读物。

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

  • 声明新的 NgModule 称为ApplicationPipesModule

  • 将管道添加到-decorator 元数据的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 {}
于 2017-03-03T11:10:09.773 回答
19

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

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

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

基本上是在 NgModules 元数据中声明和导出的管道和指令。for services 定义forRoot，它返回提供者以访问其他模块。

  • 共享模块.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 ]
    };
  }
}

  • 我的模块1.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 {}

同样明智的是，您也可以在其他模块中进行操作。

于 2018-05-11T07:43:27.380 回答
6

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

于 2017-03-03T10:31:33.927 回答
4

考虑你有这个结构：

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

 -SharedModule.ts

在 DateComponentModule 中使用 DatesPipeModule 时。

  1. 在 DatesPipeModule 中声明和导出 DatesPipe

  2. 现在将 DatesPipeModule 直接导入 DateComponentModule。

DatesPipeModule.ts

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

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

日期组件模块.ts

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

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

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

于 2020-05-03T11:03:16.673 回答
1

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

于 2019-07-02T14:44:29.873 回答