다른 모듈에서 사용할 파이프를 글로벌하게 선언하는 방법은 무엇입니까?

다른 모듈에서 사용할 파이프를 글로벌하게 선언하는 방법은 무엇입니까?

이름이 붙은 커스텀 파이프가 있습니다.

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, 상위 모듈에서 선언해야 한다는 오류가 발생합니다.

그래서 나는 그 안에 있는 파이프를 선언합니다.

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' 파이프를 찾을 수 없습니다.

각도에서 공통 지시사항, 구성요소, 파이프 등을 공유하는 좋은 기술은 소위 공유 모듈을 사용하는 것입니다.

이러한 모듈은 다른 모듈에서 사용할 수 있도록 공통 부품을 선언하고 내보냅니다.

각도 설명서의 기본 섹션은 공유 모듈에 대한 읽기가 매우 좋습니다.

예를 들어 당신의currConvert피리를 부리다

• 새 NgModule 호출 선언ApplicationPipesModule

• 파이프를 에 추가합니다.declarations그리고.exports배열된NgModule-decor기 메타데이터

• 파이프가 작동하는 데 필요한 모든 모듈을 에 추가합니다.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 {}
  

공유 모듈을 사용하여 서비스, 지침, 파이프, 구성 요소를 공유할 수 있습니다.

모듈을 만들고 파이프, directive, 서비스 또는 구성요소를 가져와야 하며 서비스에 대한 선언, 내보내기 및 공급자를 설정해야 합니다.

원하는 곳으로 공유 모듈을 가져와 사용합니다.

기본적으로 NgModules 메타데이터에서 선언되고 내보내는 파이프 및 지시어.서비스의 경우 Root에 대해 정의하고, 이는 공급자가 다른 모듈에 액세스할 수 있도록 반환합니다.

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

마찬가지로 다른 모듈에서도 할 수 있습니다.

다음과 같은 구조를 가지고 있다고 생각합니다.

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

DateComponent Module에서 DatePipeModule을 사용하는 경우.

1. 날짜 표시 및 내보내기 날짜PipeinDate

2. 이제 DateComponent Module로 DatePipeModule을 직접 가져옵니다.

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파이프 이전에 로드되지 않으므로 오류가 발생합니다.

모듈을 만들어야 합니다.SharedModule거기서 파이프 신고해요그럼 파이프를 수출해야 합니다.SharedModule그리고 당신의 것을 수입합니다.SharedModule둘 다Module1그리고.Module2. Angular의 문서에는 다음과 같은 훌륭한 기사가 있습니다. https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module

공유 모듈의 CLI를 사용하여 파이프를 생성하는 경우 수동으로 파이프를 '내보내기' 목록에 추가해야 합니다.공유 모듈에 파이프를 내보내기로 추가할 때까지 브라우저에서 파이프 오류가 발생했습니다.

언급URL : https://stackoverflow.com/questions/42576420/how-to-declare-a-pipe-globally-to-use-in-different-modules