2017-03-03 18 views
9

iFarklı Modüllerde kullanmak için boruyu global olarak nasıl bildiririm? Şimdi

(i) Module1 
(ii) Module2 

i Module1 ve Module2'de içe bir hata söyleyerek diyor, özel bir boru CurrConvertPipe

İki farklı modüllerde bu kullanmak gerekir
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; 
    } 
} 

adında oluşturulan sahip daha yüksek bir modülde bildirilmelidir.

Yani ben 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 { } 

içine ilan ettiler Ama Module1 kullanıldığında bir, boru 'currConvert'

cevap

27

Eğik iyi bir teknikle vb ortak direktifleri, bileşenler, boru paylaşmak için sözde paylaşılan modülünü kullanmaktır.

Bu modüller, diğer modüllerden herhangi biri için kullanılabilir hale getirmek amacıyla ortak parçaları bildirir ve dışa aktarır.

Köşeli belgenin fundamentals section'u, paylaşılan modüller hakkında çok iyi okunabilir.

Örnek olarak currConvert -pipe'nızı alalım.


  • beyan yeni NgModule
  • Piponuzu imports için çalışmak için gerekli olabilecek herhangi bir modül ekleyin NgModule -decorator meta declarations ve exports diziler için boruyu ekle
  • ApplicationPipesModule denilen dizi

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

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

uygulama pipes.module.ts


  • ithalat Piponuzu gidiyor modüller halinde oluşturulmuş ApplicationPipesModule modül imports dizide
ekleyerek, kullanılacak
// other imports 
import { ApplicationPipesModule } from './{your-path}'; 

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

benim-modül1.module.ts


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

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

my-module2.module.ts

DÜZENLEME: Geliştirilmiş cevap metni ve örnek.

4

Bir modül yapmalıdır bulunamadı hata atar Yani, SharedModule ve borunuzu oraya bildirin. Sonra SharedModule yılında boru ihracat ve Module1 ve Module2 hem sizin SharedModule içe olmalıdır. Açısal dokümanlarının büyük bir makale var: https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module

+0

@Sajeetharan app.module _imports_ 'Module1' ve' Module2', bu nedenle bu modüllerdeki * * * boruları içe aktarılmaz. 'Module1' içinde 'SharedModule 'öğesini içe aktarırsanız, boru' SharedModule'de içe aktarılır ve' Module1 'öğesine aktarılır. – Ledzz

İlgili konular