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

Posted

tags:

篇首语:本文由小常识网(cha138.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;
  }
}

我需要在两个不同的模块中使用它,Module1Module2。 当我导入Module1Module2时,我收到一个错误,说它应该在更高级别的模块中声明。

所以我在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中,共享公共指令,组件,管道等的一种好方法是使用所谓的共享模块。

这些模块声明并导出公共部件,使其可用于任何其他模块。

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

我们以你的currConvert管道为例。

  • 声明名为ApplicationPipesModule的新NgModule
  • 将管道添加到declarations-decorator元数据的exportsNgModule数组中
  • 添加管道可能需要的任何模块以工作到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 {}
另一答案

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

另一答案

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

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

将共享模块导入到您想要的位置并使用它。

基本上是在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 ] }; } }
  • 我-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 {}

同样,你也可以在模数中做。

另一答案

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

以上是关于如何在全局范围内声明管道以在不同模块中使用?的主要内容,如果未能解决你的问题,请参考以下文章

我正在学习反应,我的代码运行良好,但我如何才能一次性声明 currDate 以在全局范围内使用它以在 useState 中使用

JavaScript中全局变量和局部变量的不同

JavaScript中全局变量和局部变量的不同

如何定义常量在全局范围内nodejs

全局范围的扩充只能直接嵌套在外部模块或环境模块声明中 (2669)

为啥在全局范围内声明通道会产生死锁问题