2017-03-03 12 views
9

teraz mam rura niestandardowych utworzonych nazwie CurrConvertPipeJak zadeklarować globalnie rurę do wykorzystania w różnych modułach?

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; 
    } 
} 

muszę to wykorzystać w dwóch różnych modułów,

(i) Module1 
(ii) Module2 

Kiedy importować w Module1 i Module2 mówi błąd mówiąc, że powinien być zadeklarowany w module wyższego poziomu.

więc mam zadeklarowane wewnątrz 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 { } 

Ale kiedy go używać w Module1, to zgłasza błąd Rura „currConvert” nie została znaleziona

Odpowiedz

27

W Angular dobrym sposobem na dzielenie się wspólnymi dyrektywami, komponentami, rurami, itp. Jest użycie wspólnego modułu , który ma wspólny moduł.

Moduły te zgłaszają i eksportują części wspólne, aby nadawały się do wykorzystania w innych modułach.

fundamentals section z kątowej dokumentacji jest bardzo dobrą lekturą na temat wspólnych modułów.

Weźmy za przykład rurkę currConvert.


  • stwierdzenie nowy NgModule nazywa ApplicationPipesModule
  • Dodaj rurę do tablic metadanych NgModule -decorator declarations i exports
  • Dodaj żadnych modułów, które mogą być wymagane dla danego rura pracować do imports array

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

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

APLIKACJI pipes.module.ts


  • importu utworzony ApplicationPipesModule moduł do modułów, gdzie rura ma być stosowany przez dodanie go do tablicy
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 {} 

moi-module2.module.ts

EDIT: Ulepszony tekst odpowiedź i przykładem.

4

należy utworzyć moduł , czyli SharedModule i zadeklaruj swoją fajkę. Następnie należy wyeksportować potok w wersji SharedModule i zaimportować plik SharedModule zarówno w postaci Module1, jak i Module2. W dokumentach Angular'a jest świetny artykuł: https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module

+0

@Sajeetharan app.module _imports_ 'Module1' i' Module2', więc potok jest * nie * importowany w tych modułach. Jeśli zaimportujesz 'SharedModule' w' Module1', to rura zostanie zaimportowana w 'SharedModule' i eksportuje do' Module1' – Ledzz

Powiązane problemy