2017-03-03 8 views
9

अब मैं एक कस्टम पाइप 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; 
    } 
} 

मैं दो अलग-अलग मॉड्यूल में इस का उपयोग करने की आवश्यकता है नामित बनाया है,

(i) Module1 
(ii) 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'

उत्तर

27

कोणीय एक अच्छा तकनीक में एक तथाकथित साझा मॉड्यूल उपयोग करने के लिए है।

वे मॉड्यूल आपके अन्य मॉड्यूल के लिए उपयोग करने योग्य बनाने के लिए आम भागों की घोषणा और निर्यात करते हैं।

कोणीय दस्तावेज के fundamentals section साझा मॉड्यूल के बारे में बहुत अच्छी तरह से पढ़ा गया है।

उदाहरण के लिए अपने currConvert -pipe उदाहरण लें।


  • घोषित नई NgModule ApplicationPipesModule
  • बुलाया NgModule -decorator मेटाडाटा के declarations और exports सरणियों के लिए पाइप जोड़े
  • कि आपके पाइप imports को काम करने के लिए आवश्यक हो सकता है किसी भी मॉड्यूल जोड़ें सरणी

// other imports 
import { CurrConvertPipe } from './{your-path}'; 

@NgModule({ 
    imports: [ 
    // dep modules 
    ], 
    declarations: [ 
    CurrConvertPipe 
    ], 
    exports: [ 
    CurrConvertPipe 
    ] 
}) 
export class ApplicationPipesModule {} 

आवेदन-pipes.module.ts


  • आयात मॉड्यूल जहां अपने पाइप जा रहा है में बनाया ApplicationPipesModule मॉड्यूल imports सरणी
में जोड़कर, प्रयोग की जाने वाली
// other imports 
import { ApplicationPipesModule } from './{your-path}'; 

@NgModule({ 
imports: [ 
    // other dep modules 
    ApplicationPipesModule 
], 
declarations: [], 
exports: [] 
}) 
export class MyModule1 {} 

my-module1.module।ts


// other imports 
import { ApplicationPipesModule } from './{your-path}'; 

@NgModule({ 
imports: [ 
    // other dep modules 
    ApplicationPipesModule 
], 
declarations: [], 
exports: [] 
}) 
export class MyModule2 {} 

मेरी-module2.module.ts

संपादित करें: बेहतर जवाब पाठ और उदाहरण।

4

आप एक मॉड्यूल बनाना चाहिए नहीं पाया जा सका फेंकता , यानी SharedModule और वहां अपनी पाइप घोषित करें। फिर आपको SharedModule में पाइप निर्यात करना चाहिए और दोनों को Module1 और Module2 में आयात करना चाहिए। वहाँ कोणीय के डॉक्स में एक महान लेख है: आम निर्देशों, घटकों, पाइप, आदि साझा करने के लिए https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module

+0

@Sajeetharan app.module _imports_ 'मॉड्यूल 1' और 'मॉड्यूल 2', इसलिए इन मॉड्यूल में पाइप * आयात नहीं किया गया है। यदि आप 'मॉड्यूल 1' में 'साझा मॉड्यूल' आयात करते हैं तो पाइप को 'साझा मॉड्यूल' में आयात किया जाता है और 'मॉड्यूल 1' में निर्यात किया जाता है। – Ledzz

संबंधित मुद्दे