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

cld4siwp 于 2023-01-31 发布在 TypeScript

关注(0)|答案(5)|浏览(166)

我有一个名为**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”

typescript

来源：https://stackoverflow.com/questions/42576420/how-to-declare-a-pipe-globally-to-use-in-different-modules

5条答案

按热度按时间

p5cysglq1#

在Angular中，共享公共指令、组件、管道等的一个好方法是使用所谓的共享模块。
这些模块声明并导出公共部分，以使它们可用于任何其他模块。
Angular 文档的fundamentals section是一个非常好的关于共享模块的读物。
让我们以currConvert管道为例。

声明名为ApplicationPipesModule的新NgModule
将管道添加到NgModule-decorator元数据的declarations和exports数组中
将管道工作所需的任何模块添加到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 {}

赞(0）回复(0）举报 2023-01-31

new9mtju2#

您可以使用共享模块共享您的服务、指令、管道、组件
您必须创建一个模块，导入管道、指令、服务或组件，并设置服务的声明、导出和提供程序。
导入共享模块到任何你想要的地方并使用它。
基本上是在NgModules meta数据中声明和导出的管道和指令。for services定义了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 {}

像明智的，你可以做其他模块也。

赞(0）回复(0）举报 2023-01-31

5sxhfpxr3#

您应该创建一个模块，例如SharedModule，并在那里声明您的管道。然后您应该在SharedModule中导出管道，并在Module1和Module2中导入您的SharedModule。https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module

赞(0）回复(0）举报 2023-01-31

ylamdve64#

假设你有这样的结构：

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

在日期组件模块中使用日期管道模块时。
1.在DatesPipeModule中声明和导出DatesPipe
1.现在将日期管道模块直接导入到日期组件模块中。
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 DateComponentModule{}

您也可以从SharedModule导出它，然后导入到DatesComponentModule.ts中，但是SharedModule不会在管道之前加载，因此它会抛出一个错误。

赞(0）回复(0）举报 2023-01-31

mbjcgjjk5#

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

赞(0）回复(0）举报 2023-01-31